React 对内联函数给出 301 错误，但对内联匿名函数没有

Question

const [count, setCount] = useState(0)

return <>
    <p>{count}</p>
    <button onClick={setCount(count + 1)} >Increment count by 1</button>
</>

但如果我运行 匿名函数中的 setCount 函数 我不会:

return <>
   <p>{count}</p>
    <button
        onClick = {() => {
            setCount(count + 1)
        }} 
    >Increment count by 1</button>
</>

有人知道为什么吗？

Answer 1

在第一个示例中，每次组件呈现时都会调用 setCount（onClick 设置为 setCount(count + 1) 的 return 值）。此调用触发重新渲染。这就是您收到该错误的原因。

在第二种情况下，对 setCount 的调用被推迟到单击按钮时，因此不会导致在每次渲染时都重新渲染。

React gives a 301 error with inline functions but not with inline anonymous ones