Почему функция, которая вызывается для '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 Ошибка: слишком много повторныхоказывает. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл.

Answer 1

Значение, присвоенное onClick, должно быть функцией .

onClick={setCount(count + 1)} немедленно вызовет setCount и назначит его возвращаемое значение в качестве функциивызывать при нажатии на элемент.

Поскольку она не возвращает функцию, ничего не произойдет, если на нее щелкнуть.

Однако, она никогда не заходит так далеко, потому что вызов setCount меняет состояние и вызывает повторное выполнение ..., котороевызывает setCount и запускает рендеринг, который… ∞

Answer 2

То, что onClick ожидает, является функцией. Используя функцию жирной стрелки Anonymous Closure (() => {setCount(count + 1)}), вы передаете функцию в качестве prop. даже передавая функцию как проп, как onClick={setCount} вы передаете функцию. Но если вы используете onClick={setCount(count + 1)}, то на самом деле вы передаете возвращаемое значение функции setCount при каждом рендеринге. onClick - это обработчик событий, который ожидает функцию.