eslint-plugin-react将使用react/no-access-state-in-setstate规则进行此检查

此规则应防止在 setState 调用中使用 this.state。当批量调用两个状态调用并因此引用旧状态而不是当前状态时，this.state 的这种用法可能会导致错误。

如果您使用：

// destructured
const { state, setState } = this;
setState({ foo: state.foo });

由于state.foo（访问对象的属性），Eslint 仍然会警告您。为避免这种情况，您可以定义如下：

// destructured
const { state: { foo }, setState } = this;
setState({ foo });

但是如果你使用：

// undestructured
this.setState({ foo: this.state.foo });

然后，ESLINT 会警告你使用解构语法，例如：

const { foo } = this.state
this.setState({foo})

注意：由于foo是要更新的变量名称并且名称匹配，因此我们可以使用 just{foo}和 is 相同{foo: foo}。

另外，但是，我更喜欢使用this.setState()语法而不是解构到this. 因为，在任何应用程序中，我们this都会在需要时使用。并采用const { ... } = this看来，如果我们之间的代码看，当我们看到被混淆setState，而不是this.setState。作为第三个开发者的思考。

从评论中，您想一个接一个地更新状态，那么您应该使用如下回调：

onClick = () => {
   this.setState({ foo: 'Bar' }, () => {
      this.setState({ foo: this.state.foo + '!' });
   });
}

现在，您将能够Hello Bar!在演示中看到更改。

如果您像这样使用 setState：

onClick = () => {
   this.setState({ foo: 'Bar' })
   this.setState({ foo: this.state.foo + '!' });
   // obviously, better to use updater syntax though.
}

然后第一个 setState 将被最后一个覆盖。您将Hello Foo!在演示中获得更改。

此外，文档说明相同。更新程序语法只是一种方便的方法，但结果与没有更新程序语法的情况完全相同。最重要的作用仅在于其回调语法。使用回调语法，以便您可以在更新后立即访问更新的状态。

了解有关解构语法的更多信息。你可以关注我的另一篇文章，在那里你可以找到详细的信息和一些很熟悉的链接。