数据对象中地址数组的setState

Question

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

我有 React 用户组件，它调用并呈现一个用户对象，其中包含来自 mongodb 的嵌入式文档。当我 return 从数据库中获取数据时，它会按以下格式进行操作：

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

我已将地址设置为 mongo 中嵌入的 document/array 个地址，需要保持此格式。

在我的用户组件上，我正在显示 returned 值文本控件，我希望用户能够编辑、更新并提交回数据库。我已经成功地更新了对象数据，但是在对象内编辑数组让我困惑了好几天。理想情况下，我想以相同的格式传回用户对象，这样我就不必解构“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}
                      />
)

你有什么建议吗？

我应该简单地将数据作为一个简单的对象来管理并将嵌入映射到数组，然后再将其提交给数据库，还是我错过了一些非常简单的东西？

注意：我也在使用 mongoose 和 axios

Answer 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>
)

数据对象中地址数组的setState

setState of address array inside data object

arrays

mongodb

setstate

reactjs

embedded-documents