ReactJS——检测状态变化的问题答案

【问题标题】：ReactJS — problems with detecting changes in stateReactJS——检测状态变化的问题
【发布时间】：2017-03-24 15:16:36
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

正如@Radio- 提到的，_.clone 创建了一个浅拷贝克隆，所以prev 和curr 状态都引用同一个数组，所以你最好调整你的clickHandler()方法是这样的：

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

【讨论】：

【解决方案2】：

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

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

所以，prevState.bar 和 this.state.bar（您要向其中推送新值）都是对同一个数组的引用。

【讨论】：