防止在this.setState中使用this.state (this.setState/no-access-state-in-setstate)

Question

对于这段代码，我得到了一个ESlint (airbnb !this.state.dark )错误：

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 }))
}