数据对象内地址数组的 setState

问题描述

我是 React 的新手，我目前正在使用 MERN 堆栈开发一个应用程序，并希望得到一些建议。

我有 React User 组件，它调用并渲染一个带有来自 mongodb 的嵌入文档的用户对象。当我从数据库返回数据时，它采用以下格式：

{
  firstName: "joe",lastName: "smith",address: [
      {
        street: "123 Street",city: "UpCity",},],};

我已将地址设置为 mongo 中的嵌入式文档/地址数组，并且需要保持这种格式。

在我的用户组件上，我显示返回值文本控件，我希望用户能够编辑、更新并提交回数据库。我已经成功地更新了对象数据，但是在对象中编辑数组已经让我难倒了好几天。理想情况下，我想以相同的格式将用户对象传回，这样我就不必解构“req.body”并将其映射到相应的字段 - 除非这是唯一的方法。 em>

我对更新“用户”字段的状态没有问题，但似乎无法弄清楚如何更新保存在嵌入式数组中的地址数据的状态。以下是我的代码摘录

  const [data,setData] = useState({
    firstName: "",lastName: "",address: [
      {
        street: "",city: "",});

  const onChange = (e) => {
    setData({
      ...data,[e.target.name]: e.target.value,});
  };

return ( 
         <div> 
                        <TextField
                          type="text"
                          name="firstName"
                          value={data.firstName}
                          onChange={onChange}
                        />
                        <TextField
                          type="text"
                          name="lastName"
                          value={data.lastName}
                          onChange={onChange}
                        />
                      </div>
                       <TextField
                        type="text"
                        name="street"
                        value={data.address[0].street}
                        onChange={onChange}
                      />
                      <TextField
                        type="text"
                        name="city"
                        value={data.address[0].city}
                        onChange={onChange}
                      />
)

你有什么建议吗？

在将数据提交到数据库之前，我应该简单地将数据作为一个简单的对象管理并将嵌入映射到一个数组，还是我遗漏了一些非常简单的东西？

注意：我也在使用猫鼬和 axios

解决方法

这是最简单的解决方案

    const onChange = (e,type=false) => {
    if(type){
        data.address[0][e.target.name] = e.target.value
        setData({...data})
    }else{
        setData({
            ...data,[e.target.name]: e.target.value,});
    }
};

return (
    <div>
        <TextField
            type="text"
            name="firstName"
            value={data.firstName}
            onChange={(e)=>onChange(e)}
        />
        <TextField
            type="text"
            name="lastName"
            value={data.lastName}
            onChange={(e)=>onChange(e)}
        />

        <TextField
            type="text"
            name="street"
            value={data.address[0].street}
            onChange={(e)=>onChange(e,true)}
        />
        <TextField
            type="text"
            name="city"
            value={data.address[0].city}
            onChange={(e)=>onChange(e,true)}
        />
    </div>
)