0

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

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

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

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

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

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

  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

4

1 回答 1

1

这是最简单的解决方案

    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>
)
于 2021-03-10T14:51:22.927 回答