根据变量先前的值反应 useState 更新

Question

react.js 站点在 this page 上有以下代码：

const [count, setCount] = useState(0);
...
<button onClick={() => setCount(count + 1)}>

但是由于计数是根据其先前的值更新的，所以不应该是第二行 是

<button onClick={() => setCount(prevCount => prevCount + 1)}>

Answer 1

通常没有必要。

当前活动的点击侦听器关闭的有状态 count 变量将包含在任何给定时间点的当前计数。如果单击 3 次，组件将重新渲染 3 次，当前附加的侦听器关闭的 count 将包含 3 次。

您需要使用您正在考虑的回调表单的时间是，如果您想将 setter 函数传递到 else 某处（例如传递给子组件）而没有希望子组件也必须将 count 作为道具 - 这会导致一些混乱的样板，尤其是当组件非常嵌套时。

如果您在每次渲染时不会获得新闭包的函数中调用回调，则您也可以在当前组件中使用回调表单，例如 useEffect:< /p>

useEffect(() => {
  setInterval(() => {
    setCount(prevCount => prevCount + 1);
  }, 1000);
}, []);

因为那里的效果钩子只在挂载时运行，它可以看到的 count 变量只是初始 0 值 - 所以你必须使用回调形式。