在 React 中的 setState 之前编辑 this.state 内容答案

【问题标题】：Editing this.state content before setState in React在 React 中的 setState 之前编辑 this.state 内容
【发布时间】：2016-05-20 04:01:34
【问题描述】：

我想知道这种代码是否会产生副作用。

假设我在一个组件中有一些状态对象，它包含一个数组，该数组本身包含具有各种属性的对象：

getInitialState: function () {
        return {
            willContainObjects: [];
}

现在，我有一个函数可以编辑该对象，然后创建一个新的状态对象：

editObjectInArray: function (index) {
    var obj= this.state.willContainObjects[index];
    obj.someProp = 3; // mutating this.state!!!
    this.setState({
    willContainObjects: this.state.willContainObjects.slice(0, index)
                       .concat(details)
                       .concat(this.state.willContainObjects.slice(index+1))
    }); // end setState
},

obj.someProp = 3 直接改变了this.state 的状态，但在调用this.setState 并导致重新渲染之前。在调用setState 之前这种直接的状态突变会产生任何意想不到的副作用吗？我知道 React 建议不要这样做，但我认为这是一个例外。我可以使用Object.assign 创建一个新对象而不是变异，但在这种情况下我认为这样做没有意义。

【问题讨论】：

@zerkms 这不是真的。 React 不假设 state 中的对象是不可变的。你必须通过实现componentShouldUpdate来选择接受这个假设。
OP 没有变异 this.state。 OP 正在改变this.state 的子对象。只要你最终调用 this.setState() 或 this.forceUpdate()，React 默认就会支持这种突变。
@zerkms 根据documentation?请特别注意 Notes 部分，尤其是关于您所在州的可变对象。
@Brandon 现在这是一个答案。

标签： reactjs

【解决方案1】：

唯一的“副作用”是任何使用 PureRenderMixin 或实现使用浅相等测试的 shouldComponentUpdate 方法的组件可能无法理解对象已真正更改。

除此之外，虽然不推荐，但应该可以正常工作。

【讨论】：