Блог

Главная - Вопросы по программированию - Как я могу решить эту проблему ? Слишком много повторных рендеров , React ограничивает количество рендеров

Как я могу решить эту проблему ? Слишком много повторных рендеров , React ограничивает количество рендеров

#html #reactjs

Вопрос:

Я пытаюсь добавлять и удалять класс с помощью трех кнопок. Когда я нажимаю, класс должен быть добавлен и удален на других кнопках.

У меня есть постоянная:

 const [genderActive, setGenderActive] = useState('');
const isGenderActive = (active) => {
   setGenderActive(active);
};

HTML:

 <div aria-label="title" role="group" class="btn-group">
   <button name="0" type="button" className={genderActive === 0 ? 'selected btn btn-primary' : 'btn btn-primary' } onClick={isGenderActive(0)}>M.</button>
   <button name="1" type="button" className={genderActive === 1 ? 'selected btn btn-primary' : 'btn btn-primary' } onClick={isGenderActive(1)}>Mme.</button>
   <button name="2" type="button" className={genderActive === 2 ? 'selected btn btn-primary' : 'btn btn-primary' } onClick={isGenderActive(2)}>Mx</button>
</div>

Когда я компилирую react, у меня возникает ошибка:

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

Я нашел несколько сообщений с этой ошибкой, но я не могу решить проблему.

Знаете ли вы, как я могу решить эту проблему ?

Комментарии:

1. измените onClick={isGenderActive(0)} onClick={() => isGenderActive(0)} и сделайте это для всех экземпляров

2. @Апостолос, это работа, спасибо тебе

3. Пожалуйста, обратите внимание, что прямо сейчас при каждом анализе HTML-содержимого вызывается функция. То, что сказал @Apostolos, предотвратит это, обернув его в другую функцию, которая только прикрепляет обработчик событий, а не выполняет его.

Ответ №1:

Потому что вы вызываете isGenderActive рендеринг. Поэтому измените состояние и повторно отрисовайте. Вы просто обновляете, чтобы убедиться isGenderActive , что звоните только при нажатии:

 onClick={() => isGenderActive(0)}
Метки: ,