为什么应该在另一个箭头函数内调用此代码段下面的“ 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)}>，导致显示以下错误：

未捕获的错误：重新渲染过多。 React限制了渲染次数以防止无限循环。

Answer 1

分配给onClick的值必须是功能。

onClick={setCount(count + 1)}将调用setCount 立即，并将其返回值分配为单击元素时要调用的函数。

因为它不返回函数，所以如果单击它，则不会发生任何事情。

但是，由于调用setCount会更改状态并触发重新渲染…，因此调用setCount并触发重新渲染…∞，它永远不会走太远>