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

【问题标题】：Prevent using this.state within a this.setState (react/no-access-state-in-setstate)防止在 this.setState 中使用 this.state (react/no-access-state-in-setstate)
【发布时间】：2020-03-19 05:07:06
【问题描述】：

对于这段代码，!this.state.dark 我收到 ESlint (airbnb config) 错误：

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

【问题讨论】：

this.setState(({ dark }) => ({ dark: !dark }));见reactjs.org/docs/state-and-lifecycle.html#using-state-correctly
这修复了 ESlint 错误。谢谢！

标签： javascript reactjs eslint eslint-config-airbnb

【解决方案1】：

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

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

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

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

【讨论】：

我建议您在您的setState 回电中致电setItem。
有趣的方法。工作会怎样？像这样this.setState(({ dark, setIteam }) => ({ dark: !dark }))？
this.setState(({ dark }) => { localStorage.setItem('dark', JSON.stringify(!dark)); return { dark: !dark }; });