反应：Javascript分配不更新对象答案

【问题标题】：React: Javascript assignment not updating object反应：Javascript分配不更新对象
【发布时间】：2019-02-28 23:41:25
【问题描述】：

此处代码：https://codesandbox.io/s/github/nieroda/js_err

在函数 endTurn 中

    console.log(`GameBoard Before`)
    console.log(gameBoardCopy)

    gameBoardCopy[currentRow][4] = { numColorMatch: 2, numExactMatch: 2 }

    console.log(`GameBoard After`)
    console.log(gameBoardCopy)

查看控制台输出

Before:
5: Array(5)
0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}

After 

5: Array(5)
0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}

我不知道为什么它不起作用？

【问题讨论】：

请在问题本身中包含minimal reproducible example。
看看this question。这可能会有所帮助。（我看到第 1 行让您将一个对象分配给另一个变量并将其称为“副本”，但因为分配是“按引用”而不是“按值”，我认为这不会像您认为的那样 - 两者"copy" 和 original 仍然是同一个对象，你只是给了它两个不同的名字。）
尝试制作对象的深层副本 - 分配仍然不起作用@GarrettMotzner
这里发生了一些疯狂的突变问题 :)。当我使用调试器单步执行时，结果与我没有设置断点时不同。因此，控制台及其记录数据的时间点也存在时间问题。这很奇怪。所以数据正在被设置，然后它被变异了。
好吧，所以你在很多地方都发生了突变，其中之一就是提示块，当你遍历钉子时，你正在改变一个数据结构。即使固定了，仍然存在突变。因此，为了帮助防止这种情况发生，我建议使用Immutable.js。这为您提供了替代的不可变列表而不是数组和不可变映射而不是对象，这样您就不会意外地改变事物。不过，这是另一回事……

标签： javascript reactjs flow

【解决方案1】：

您的数据正在更新，但它在代码的其他地方发生了变异，console.log 不够及时（尤其是代码沙箱@ 987654321@ 周围 console.log)。因此，为了解决这个问题，请执行以下操作之一：

JSON.stringify 您的数据，然后将其传递给 console.log。这会将数据冻结成一个字符串。
Deep copy 传递给 console.log 之前的数据结构。（问题是there is no built-in deep copy for JS）
使用调试器并在日志后设置断点，可以使用调试器控制台或debugger 语句。（如果调试器控制台被隐藏，通常debugger 语句将被忽略，因此请确保它已启动）。这将中断正常流程并强制刷新日志，从而为您提供更准确的数据。

这回答了您的问题，但不是您的问题，即您正在改变您不希望发生的事情。这可以通过确保您首先是 (deep) copying 来解决您正在变异的所有内容，而不是使用变异（Immutable.js 之类的库可以在那里提供帮助），或者使用像 MobX 这样的东西来解决，它允许您变异事物然后订阅那些突变事件。

【讨论】：