React setState 不更新布尔变量

Question

我使用

创建了一个状态变量

const [drawing, setDrawing] = useState(false)

然后我有这个按钮，它应该更新 drawing

的值

 <button onClick={() => toggleDrawing}>Toggle Drawing</button>

toggleDrawing 函数是：

const toggleDrawing = () => {
    setDrawing(true)
  }

但是当我按下按钮和 console.log 时，drawing id 的值没有更新，它总是落后一步。它以 false 的值开始，单击一次后仍为 false，第二次单击后它切换为 true。

Answer 1

const toggleDrawing = () => {
    setDrawing((oldValue) => !oldValue)
  }

如果你想在 React 中切换状态，你总是想参考之前的状态

Answer 2

const [drawing, setDrawing] = useState(false)

案例：1 如果您想要切换 true=>false 和 false=>true

const toggleDrawing = () => {
    setDrawing(!drawing);
  }

<button onClick={toggleDrawing}>Toggle Drawing</button>

Case:2 如果你只是想把它设置为 true

 const toggleDrawing = () => {
    setDrawing(true);
  }

<button onClick={toggleDrawing}>Toggle Drawing</button>

沙盒https://codesandbox.io/s/vigilant-meadow-thdni?file=/src/App.js

注意 =>toggleDrawing 函数中的 console.log(drawing) 首先会返回 false，然后真正的原因是状态没有更新

Answer 3

问题

您只是返回 toggleDrawing 函数而不执行它

解决方案

当点击事件这样发生时执行函数

<button onClick={() => toggleDrawing()}>Toggle Drawing</button>

或者将 toggleDrawing 作为实际函数传递给 onClick

<button onClick={toggleDrawing}>Toggle Drawing</button>