Question

修改prevState的一部分并将其返回到setState（）中是否有真正的缺点？

示例：

this.setState(prevState => {
    prevState.myObject.isItTrue = !prevState.myObject.isItTrue;
    return {myObject: prevState.myObject};
});

而不是：

this.setState(prevState => {
    const myObject = Object.assign({}, prevState.myObject);
    myObject.isItTrue = !myObject.isItTrue;
    return {myObject: myObject};
});

我为自己保存Object.assign()的第一个代码是否有真正的劣势？

编辑：如果我是对的，则prevState.myObject只是对this.state.myObject的引用，因此更改prevState.myObject实际上也会更改this.myObject.object！但是，只要我使用setState（）传递包含新数据的对象，即使它只是对此this.state中旧对象的引用，这似乎也不会破坏任何内容。您是否同意这样做还可以，即这样做不会破坏任何东西？

Answer 1

以下文档：

状态是对应用更改时组件状态的引用。它不应该直接突变。相反，更改应通过根据状态和道具的输入来构建新对象来表示。

https://reactjs.org/docs/react-component.html

因此，您不应将更改直接应用于该状态。

无论哪种方式，为什么不做这样的事情？：

this.setState(prevState => ({
    myObject : {
        ...prevState.myObject,
        isItTrue: !prevState.myObject.isItTrue,
    }
}));

这种方式将从 prevState 中获取所有元素，但同时更改所有要修改的元素。

Answer 2

第一个prevState和this.state是同一对象。因此，您可以直接修改实际状态。

其次，您可能会将myObject作为道具传递给另一个组件，并且由于它将始终是同一对象，所以该组件始终不知道某些更改并且不会重新渲染（ 例如PureComponent和实现componentDidUpdate或shouldComponentUpdate并测试更改的代码）

有关所有问题的展示，请参见https://codesandbox.io/s/zen-aryabhata-m07l4。

所以您应该使用

this.setState(state => ({
      myObject: {
        ...state.myObject,
        isItTrue: !state.myObject.isItTrue
      }
    }));

可以在setState中修改prevState的一部分吗？

2 个答案: