Слишком много повторных рендеров. React ограничивает количество отображений, чтобы предотвратить бесконечный цикл - Реагирующие перехваты

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие перехваты

Вопрос:

Я пишу блок кода для сортировки некоторых данных с помощью реактивных хуков. Но я получаю вышеупомянутое предупреждение / ошибку, ниже приведен мой код.

 const [sort, setSort] = useState(sortedInfo)

if (condition){
 // some logic
} else if (columns.find((col) => col.hasOwnProperty("actualSort"))){
 const {data, asc} = columns.find((col) => col.hasOwnProperty("actualSort").sorting)
 setSort(data);
}

Мой случай else вызывается много раз, что соответствует условию. Что-нибудь, что можно сделать, чтобы свести к минимуму вызовы setSort?

1. Измените свой condition или else if тест, чтобы он выполнялся не так часто? Трудно сказать без дополнительного контекста кода и без описания логики, которую вы ищете

2. Не вызывайте setSort() непосредственно в теле функционального компонента. Исходя из того, что я вижу, вы, вероятно, захотите перенести эту логику в useEffect() обратный вызов.

Ответ №1:

Вызов setSort() при рендеринге вызывает слишком много рендеров, используйте useEffect перехват для запуска изменений при изменении значения.

 useEffect(() => {
  if (condition){
    // some logic
  } else if (columns.find((col) => col.hasOwnProperty("actualSort"))){
    const {data, asc} = columns.find((col) => col.hasOwnProperty("actualSort").sorting)
    setSort(data);
  }
}, [condition]); // Only re-run the effect if condition changes

Ответ №2:

setState вызывает повторный рендеринг компонента; и повторный рендеринг снова запускает setState — бесконечный цикл; В функциональных компонентах необходимо использовать useEffect для устранения этой проблемы;

 useEffect(() => {
   setSort(data)
}, [condition])

setSort() вызвал повторный рендеринг, а затем (если условие не изменено) useEffect() проверяет setSort(data) , что он больше не запускается.

Ответ №3:

setSort вызовет повторный рендеринг. Итак, он вызывает условие If. Вы должны использовать логику условия if при вызове функции или useEffect .