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

Question

對於這段代碼， !this.state.dark我收到了一個 ESlint (airbnb config) 錯誤：

Use callback in setState when referencing the previous state.

我嘗試使用以下ESlint 文檔重構代碼。 但我很難弄清楚。 關於如何解決這個問題的任何建議？

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

Answer 2

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