React 使用内联函数给出 301 错误，但内联匿名函数没有答案

【问题标题】：React gives a 301 error with inline functions but not with inline anonymous onesReact 使用内联函数给出 301 错误，但内联匿名函数没有
【发布时间】：2021-10-17 17:54:36
【问题描述】：

此代码生成 React 错误 301：https://reactjs.org/docs/error-decoder.html/?invariant=301

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>
</>

有人知道为什么吗？

【问题讨论】：

由于在 onClick 函数中调用了 setCount，这会导致状态值不断变化并重新渲染。您必须将 onClick 函数内的函数分配给函数。就像第二次使用一样。

标签： reactjs state use-state anonymous-function inline-functions

【解决方案1】：

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

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

【讨论】：

但是onClick里面的函数不应该只在点击时运行，匿名还是内联？
在第一种情况下，您不是传递函数，而是调用函数的结果。例如这是const onClick = myFunc() 和const onClick = myFunc 之间的区别