反应衍生道具

Question

简单的概述：请考虑以下结构：

• App（将users保持在状态）
• 表单（{users作为props传递，存储在本地this.state = { data: this.props.data }中）
  • 表格行（user）
  • 表格行（user）
  • 表格行（user）

更新一行时，state中的Form被更新。这样一来，我可以独立于Form管理App state上的数据。然后，当用户单击“保存”或“添加”按钮等时，我可以控制将数据保存到App state。我不希望应用程序的状态立即更新，但是，看起来好像是在更新，回到应用程序的状态。我尝试使用传播算子来复制数据-不行。

Codepen：https://codepen.io/MrCGates/pen/YzXYMEv

如果您查看此示例，它将不会更新状态的主显示，但是，如果您进行检查，则会修改实际状态。尽管这对于显示很好，但是我只需要在用户单击“保存”按钮时才保存状态。目前，我的应用程序正常运行，但事实是，当我们更新第2行时，第1行和第3行中的所有更改也都会更新，因为我采用了Main的状态，找到了第2行并进行了更新。好吧，＃1和32的状态已更新，因此它基本上是在更新整个状态。

Answer 1

我不一定喜欢这项技术，但是我可以通过以下方式解决此问题：

this.state {data：JSON.parse（JSON.stringify（this.props.data））};

问题是，复制数组将复制为参考，即使使用散布，地图等也是如此。使用JSON ...创建深层值副本。