Question

我了解到我需要在更新之前获取我的状态副本，但我注意到即使在调用setState（）之前状态也会更新：

let drags = {...this.state.drags};

// Current item
drags[key].offsetMove = null;

// State already updated?
this.setState({drags});

...... spread运算符是否仍然可以通过引用工作？

Answer 1

{...this.state.drags}生成对象的浅副本。如果该对象内的任何值是对象，则将引用它们，而不是复制它们。

drags[key].offsetMove = null;正在修改drags[key]中的现有对象，该对象由旧状态和新的状态浅层副本引用。如果您想完全避免突变，请在该特定密钥上构建一个新对象。

var drags = {
    ...this.state.drags,
    [key]: {
        ...this.state.drags[key],
        offsetMove: null
    }
}

对于记录，您的代码完全可以用于React。这也完全没问题：

const { drags } = this.state;
drags[ key ].offsetMove = null;
this.setState({ drags });

您的组件仍然可以更新。但是，对于像redux这样的库，每次更改对象的属性时，redux都需要一个新对象，该对象是示例中的第一个代码块。作为个人选择，我总是使用类似第一种风格的东西，而且几乎从不改变对象。我在我的应用程序中发现的最阴险的错误发生是因为有人突变了一个对象而我并不期待它。使用更改的密钥创建对象的新副本可确保任何引用旧对象的人都不会从其下方拉出地毯。

没有setState的状态更新

1 个答案: