为什么不能将 useState 钩子的调度函数直接传递给 onClick 处理程序？

Question

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

我知道注释掉的行会导致无限循环，但我想知道为什么会这样。 setCount 调度函数不是只在点击时调用吗？

Answer 1

这是因为 JSX 中 {} 中的表达式被求值，然后它的结果被用在 {} 所在的地方——在这种情况下，作为onClick 属性的值。所以 onClick={setCount(count + 1)} 评估 setCount(count + 1)（调用函数，这将设置状态）然后将结果值用于 onClick。由于调用它会设置状态，这会导致 re-rendering，它会无休止地重复。

您的其他版本在评估 JSX 时创建一个函数而不调用它，这就是它起作用的原因。

Answer 2

当你这样做时：

onClick={setCount(count + 1)}

您正在渲染期间调用该方法。

我没有看到无限循环，但您正在为每个渲染调用 setCount 导致重新渲染。

为什么不能将 useState 钩子的调度函数直接传递给 onClick 处理程序？

Why can't the dispatch function of a useState hook be passed directly into an onClick handler?

javascript

reactjs

react-hooks

use-state