React-当我更新一个重构的状态副本时，为什么状态对象会被更新

Question

React中有一个表单，需要将其转换为不同的数据结构。

表单的数据结构如下-

const [form, useForm] = useState([
{
id: 1,
title: "Section",
url: "testLink",
content: [{ id: 3, title: "", url: "" }]
},
{
id: 2,
title: "Section",
url: "testLink",
content: [{ id: 4, title: "", url: "" }]
}
]);

当用户点击提交时，我需要删除id属性，因为后端不接受此属性。

我试图在下面的例子中做到这一点-

const handleSubmit = (event) => {
const formData = [...form];
formData.map((item) => {
delete item.id;
});
console.log(form);
console.log(formData);
};

我希望表单和formData对象有不同的属性(formData没有id，但表单有(。

我不确定我在这里做错了什么？这里有一个来自CodeSandbox的演示(我做了一些修改以使其尽快工作(-https://codesandbox.io/s/elated-noether-xcr6r?file=/src/App.js

感谢您花时间调查此事！

Answer 1

您必须克隆对象。最简单的方法是将其解析为Json，然后将其解析回对象。

见下文

const modifyObject = (event) => {
const formData = form.map(x=> JSON.parse(JSON.stringify(x)))
formData.map((item) => {
delete item.id;
});
console.log(form);
console.log(formData);
};

还有其他方法可以克隆对象。阅读此处https://www.samanthaming.com/tidbits/70-3-ways-to-clone-objects/

Answer 2

spread运算符创建表单对象的浅层副本，因此当您修改引用表单所引用的同一对象的formData时，它将更新底层对象。相反，使用lodash的cloneDeep实用程序创建表单对象的深度副本。

import cloneDeep from 'lodash/cloneDeep';
const formData = cloneDeep(form);

https://lodash.com/docs/4.17.15#cloneDeep