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

【问题标题】：Why can't the dispatch function of a useState hook be passed directly into an onClick handler? [duplicate]为什么不能将 useState 钩子的调度函数直接传递给 onClick 处理程序？ [复制]
【发布时间】：2020-09-29 17:17:00
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs react-hooks use-state

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

当你这样做时：

onClick={setCount(count + 1)}

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

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

【讨论】：

是的，对不起，我以为他的意思是递归 setCount 的无限循环