React：Javascript赋值不更新对象

Question

代码在这里：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}

我无法弄清楚为什么它不起作用？

Answer 1

你的数据正在更新，但它在代码中的其他位置发生变异，并且console.log不够直接（特别是在wrapper周围的代码沙箱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这样的东西来允许你改变事物然后订阅那些突变事件来解决。