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 [drawing, setDrawing] = useState(false)

案例：1 如果你想要一个切换 true=>false 和 false=>true

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

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

案例：2 如果你只想设置为真

 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，然后 true 原因是状态未更新

Answer 2

问题

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

解决方案

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

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

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

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

Answer 3

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

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