数据对象内地址数组的setState答案

【问题标题】：setState of address array inside data object数据对象内地址数组的setState
【发布时间】：2021-06-08 12:05:35
【问题描述】：

我是 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}
                      />
)

你有什么建议吗？

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

注意：我也在使用 mongoose 和 axios

【问题讨论】：

您的地址可以是多个，因为它们在一个数组中，但在代码中只有 2 个输入
没错，因为它将是一个对象数组。随着时间的推移，期望这将填充更多地址

标签： arrays reactjs mongodb setstate embedded-documents

【解决方案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>
)

【讨论】：