javascript - 为什么在下面的代码片段中调用 'onClick' 的函数应该在另一个箭头函数中调用？

Question

这是代码片段...

const CountClicks = () => {
    const [count, setCount] = useState(0);
    return(
        <div>
            <p>You clicked {count} times.</p>        
            <button onClick={() => {setCount(count + 1)}}>
                Click me
            </button>
        </div>
    );
}

我试过<button onClick={setCount(count + 1)}>这导致显示以下错误:

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Answer 1

分配给 onClick 的值必须是函数。

onClick={setCount(count + 1)} 将立即调用 setCount 并将其返回值指定为在单击元素。

由于它不返回函数，因此单击它不会发生任何事情。

但是，它永远不会走到这一步，因为调用 setCount 会更改状态并触发重新渲染...调用 setCount 并触发重新渲染... ∞