arrays - 数据对象内地址数组的setState
问题描述
我是 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
解决方案
这是最简单的解决方案
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>
)
推荐阅读
- dart - 如何在 Dart 中替换 unicode 转义字符
- sql - 如何通过在接下来的 23 天内将日期列增加 1 天来将值插入下表?
- visual-studio-code - Linux Mint 上的 VSCode,集成终端无法输入任何内容
- stack-overflow - 我们可以使用空手道工具自动化 Windows 服务吗?
- python - 如何将值从另一个数据帧映射到另一个数据帧的标头
- scala - 如何获取在 GROUP BY 子句中分组的元素的 Seq?
- reactjs - 在 react-native 中用 createStructuredSelector 替换 useSelector
- java - Eclipse:使用 Coverage 进行测试会抛出 java.lang.instrument.IllegalClassFormatException
- ios - Swift右栏按钮项目填充问题?
- karate - 是否可以使用命令行覆盖在 Runner.path() 中声明的类路径?