Блог

Со мной такого никогда не случалось, и я не знаю, почему это происходит.

У меня есть эти два компонента, которые создают бесконечный цикл в эффекте использования дочернего компонента:

 function Container(){
  return <div> <Description /> </div>
}

// If I remove "= []" part no infinite loop is created
function Description({list = []}){
  const [dict, setDict] = useState({})

  useEffect(() => {
      console.log('this is for the inifinite loop log')
      setDict({}) // also, If a remove this line no infinite loop is created
  }, [list]) 

  return <div>something...</div>
}
 

** ОТРЕДАКТИРОВАНО: этот код-просто упрощение моей проблемы **

Я понимаю, что массив по умолчанию создается с другим указателем памяти каждый раз, когда компонент повторно визуализируется, но тогда невозможно поместить список в качестве опоры по умолчанию и в то же время использовать его в качестве параметра useEffect?

Когда состояние компонента функции React изменяется, функция вызывается снова. И когда состояние компонента функции изменяется, если массив зависимостей useEffect также изменяется, вызывается обратный useEffect вызов.

Когда setDict вызывается в приведенном выше коде, каждый раз создается новый экземпляр массива, который является значением по умолчанию , которое должно быть введено list , поэтому useEffect обратный вызов обновления продолжает вызываться.

Таким образом, вы можете использовать пустой массив по умолчанию, используя один и тот же массив экземпляров.

 const emptyArray = [];
// If I remove "= []" part no infinite loop is created
function Description({list = emptyArray}){
  const [dict, setDict] = useState({})

  useEffect(() => {
      console.log('this is for the inifinite loop log')
      setDict({}) // also, If a remove this line no infinite loop is created
  }, [list]) 

  return <div>something...</div>
}
 

Я не знаю, какова конечная цель, которую вы хотите, просто взглянув на приведенный выше пример кода. Я думаю, что ваш код создает параметр setDict путем обработки list из вашего родительского компонента. В общем, я думаю, что родитель Description отправляет в prop только значение массива или пустого массива list . Если это так, я думаю, что это лучший способ вызвать ошибку, когда массив не поступает без поддержки пустого массива, который используется по умолчанию list .

Это, скорее всего, связано с тем, что list массив не является одним и тем же объектом в памяти, и каждый раз создается новый массив.

Если у вас есть значение по умолчанию {} в вашем setDict , вам не нужно повторно назначать его в вашем useEffect .

Это также может быть связано с тем, что вы не проходите в list качестве опоры в своей Container функции через Description компонент. Если вы пропустите эту опору, вы также должны облегчить бесконечный цикл таким образом.