Я писал простой код React, где вводил число, а затем нажимал кнопку, чтобы добавить его к текущему значению.
Например, если я введу 5 в поле ввода, а затем нажму кнопку «Подсчет», это добавит 5 к текущему значению (0). Но я получал ошибку ниже.
Просматривая поиск Google, видимо, это распространенная ошибка, которую допускают многие начинающие программисты.
Судя по всему, строка 27 выше вызовет функцию this.handleAddCount(input) при выполнении функции render(). Я думал, что поскольку эта функция является событием onClick, функция будет запускаться только при нажатии кнопки. Однако в соответствии с тем, как работает javaScript, код будет выполняться сверху вниз, и эта функция будет выполняться, даже если это событие onClick. И это вызывает изменение состояния, и компонент снова отрисовывается, и функция снова запускается… создавая бесконечный цикл.
Есть несколько способов исправить это:
Первый вариант — изменить строку 27 на функцию Обратный вызов. Функция обратного вызова гарантирует, что this.handleAddCount(input) не запустится, пока не будет нажата кнопка.
Второй вариант — связать функцию.
Помните, что JavaScript выполняет код последовательно сверху вниз, синхронно и однопоточно.
