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

Question

这段代码生成一个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>
</>

有人知道为什么吗?

Answer 1

在第一个示例中，组件每次呈现时都调用setCount(onClick被设置为setCount(count + 1)的返回值)。这个调用触发重新渲染。这就是为什么你会得到这个错误。

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