ReactJS - 检测状态变化的问题

Question

查看此示例：http://codepen.io/lzhelenin/pen/jVbeRg

有一个小型的React应用程序，它的初始状态是这样的：

{
  foo: 123,
  bar: [{
    cux: 456
  }]
}

如果按下按钮，它会在state.bar中添加一个新对象并更改state.foo值。但是，如果你按下它并在那之后看一下控制台，你会发现前一个状态的state.bar与新状态的state.bar完全相同，尽管state.foo是不同的。为什么会这样？

Answer 1

来自http://underscorejs.org/#clone：

  

clone_.clone（object）创建提供的浅拷贝克隆   普通物体。任何嵌套对象或数组都将被复制   参考，不重复。

因此，您将新值推入的prevState.bar和this.state.bar都是对同一数组的引用。

Answer 2

正如@ Radio提到的，_.clone创建了一个浅层复制的克隆，因此prev和curr状态都指向同一个数组，因此您最好将clickHandler()方法调整为：

  clickHandler() {
    this.setState({
      foo: 999,
      bar: [
        ...this.state.bar,
        {cux: 123}
      ]
    });
  }