Question

关于我之前的问题（代码仍然给我带来麻烦）：React: Javascript assignment not updating object

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

您可以看到我在第2行上拥有的对象。尽管打印输出是不同的（如下所示），但2和5之间没有发生突变，这使我相信代码是按顺序执行的。 / p>

codeBreaker.js：108

    1. console.log("BEFORE")
    2. console.log(gameBoardCopy[currentRow])
    3. console.log("END")

    let copy = this.state.gameBoard[currentRow].slice()

    4. console.log("Copy Start")
    5. console.log(copy)

    6. console.log("Before Assignment")
    copy[4] = { numColorMatch: 2, numExactMatch: 2 }
    7. console.log("After Assignment")

    8. console.log(copy)
    9. console.log("copy end")

查看输出

之前

2。

0: "BlueViolet"
1: "BlueViolet"
2: "BlueViolet"
3: "BlueViolet"
4: {numColorMatch: 0, numExactMatch: 0}

END
复制开始

5。

    0: "BlueViolet"
    1: "BlueViolet"
    2: "BlueViolet"
    3: "BlueViolet"
    4: {numColorMatch: 2, numExactMatch: 2}

分配前
分配后

 0: "BlueViolet"
 1: "BlueViolet"
 2: "BlueViolet"
 3: "BlueViolet"
 4: {numColorMatch: 2, numExactMatch: 2}

复制结束

我不知道是什么原因造成的，提示表示赞赏。谢谢

Answer 1

console.log实际上是一个异步方法，这很可能是您看到执行“出现”不正常的原因。每当您console.log对象时，请确保console.log(JSON.stringify(JSON.parse(value)));。

查看执行顺序及其值的更好方法是添加debugger语句。尝试在第5步的正上方添加debugger;，然后遍历代码以查看实际值。我可以想象这些值将与您期望的一样。如果没有，那么使用调试器逐步执行该过程将告诉您原因。

Answer 2

看起来您无意间在改变组件的状态。您不在此处复制对象。 Javascript对象是通过引用传递的，这意味着当您直接将这样的对象分配给另一个变量时，它们都会修改相同的数据。

代替：

let copy = this.state.gameBoard[currentRow].slice()

致电：

let copy = Object.assign({}, this.state.gameBoard[currentRow]);

如果打算更新组件的状态，则应致电the.setState({obj})。

如果必须深度克隆对象，建议使用lodash或underscore 的深度复制功能（或创建自己的Objects in JS: deep copy）。

希望这会有所帮助

React / Javascript乱序执行代码

2 个答案: