javascript - 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

正如 @Radio- 提到的，_.clone 创建一个浅复制克隆，因此 prev 和 curr state 都引用同一个数组，因此您最好将 clickHandler() 方法调整为如下所示:

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