为什么 setState 也会改变我之前添加到状态的道具

Question

场景：

我有两个组件：X 和 Y。组件 Y 是组件 X 的子组件。

X 内部：

<Y data={FormObject} />

在组件 Y 的构造函数中，我将道具数据 (FormObject) 添加到 Y 的状态，效果很好。在那之后，如果我改变状态，它会影响道具。如何？当我关闭组件 Y 并重新打开它时，我看到最后的状态正在显示。 FormObject 与开始时不同。这是因为对象是引用类型，对吧？

有解决办法吗？我找到的唯一解决方案是做这样的事情：

Y 的内部构造函数：

const { data } = JSON.parse(JSON.stringify(this.props);

JSON.parse() 或 JSON.stringify() 是否通过使用不同的内存编号进行复制来更改引用？

除了上述解决方案之外，还有更好的方法吗？

Answer 1

如果您的 FormObject 没有子对象或数组，您可以使用如下的对象析构函数来解决这个问题：

const data = { ...this.props.data }; // it's a kind of shallow copy

但是如果它里面有一些对象或数组，它不会阻止突变。

所以你需要使用JSON.pares(JSON.stringify(data))或递归方法进行深度复制。

Answer 2

好的，如果你必须在你的状态下拥有新的道具副本，你可以使用一些库来克隆深度嵌套的对象，你可以使用 lodash 中的 deepClone 方法。

我还建议您查看 React 文档this

希望对您有所帮助。