Блог

Я работаю над проектом React JS, который использует React query, https://react-query.tanstack.com /, Реагирующие крючки и функциональные компоненты. Но он выдает ошибку, когда я использую запрос react для вызова API.

Это мой компонент и то, как я использую запрос в нем.

 const App = () => {
   const [ list, updateList ] = useState([])
   const info = useQuery(["item-list"], getList, {
    retry: false,
    refetchOnWindowFocus: false,
  })

  if (info.status == "success") {
     updateList(info.data)
  }
    return (
       //view components here
    )
}
  

Это моя логика вызова API getList

 export const getList= async () => {
  const { data } = await api.get("8143487a-3f2a-43ba-b9d4-63004c4e43ea");
  return data;
}
  

Когда я запускаю свой код, я получаю следующую ошибку:

react-dom.development.js:14815 Неперехваченная ошибка: слишком много повторных рендеров. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл.

Что не так с моим кодом?

Основная причина этой ошибки здесь в том, что вы запускаете этот блок кода в if инструкции в бесконечном цикле, как только у вас есть info.status === 'success' as true . Затем при каждом рендеринге updateList вызывается, который запускает другой рендеринг.

Вероятно, я бы использовал useEffect hook здесь, чтобы прослушивать изменения в info as:

 useEffect(() => {
  if (info.status == "success") {
     updateList(info.data)
  }
}, [info])
  

Вы должны удалить это if утверждение из тела <App /> компонента и использовать useEffect вместо него перехват, как было предложено выше. Делая это, это if утверждение будет проверяться один раз info при изменении, а не при каждом рендеринге.

Предлагаемое чтение использует перехват эффекта.