Question

对于这段代码，!this.state.dark我遇到了ESlint（airbnb配置）错误：

Use callback in setState when referencing the previous state.

我尝试按照ESlint documentation来重构代码。但是我很难弄清楚。关于如何解决此问题有什么建议吗？

toggleDark = () => {
  const dark = !this.state.dark
  localStorage.setItem('dark', JSON.stringify(dark))
  this.setState({ dark })
}

Answer 1

感谢@jonrsharpe向我指出了适当的文档。

事实证明，状态更新可能是异步的。 React可以将多个setState（）调用批处理到单个更新中以提高性能。在我的代码中，我只有一个要更新的值。但是，使用第二种形式的setState仍然是一个好主意，它接受一个函数而不是一个对象。

toggleDark = () => {
  const dark = !this.state.dark
  localStorage.setItem('dark', JSON.stringify(dark))

  this.setState(({ dark }) => ({ dark: !dark }))
}

禁止在this.setState中使用this.state（反应/无访问状态设置状态）

1 个答案: