Бесконечный цикл UseEffect с массивом зависимостей

Question 1

У меня проблема с useEffect и useState. Я пытаюсь заполнить состояние данными из api, но это приводит к бесконечному циклу, даже если я использую массив с зависимостями. Это работает, когда я пытаюсь узнать имя. Проблема возникает, когда я пытаюсь получить массив или объект.

Вот код:

      const id = props.match.params.id;
      const [pokemon, setPokemon] = useState({});
    
      useEffect(() => {
        let cancelRequest;
        axios
      .get(`https://pokeapi.co/api/v2/pokemon/${id}`, {
        cancelToken: new axios.CancelToken(
          (cancel) => (cancelRequest = cancel)
        ),
      })
      .then((res) => {
        setPokemon(res.data);
        console.log(pokemon);
      })
      .catch((err) => {
        console.log(`ERROR:: ${err.message}`);
      });
      return () => {
        cancelRequest();
     };
    }, [id, pokemon]);

Вот пример данных из консоли:

{abilities: Array(2), base_experience: 64, forms: Array(1), game_indices: Array(20), height: 7, …}

Спасибо.

reactjs axios use-effect

1

Kamelios 13 Июл 2020 в 16:00

Answer

Не используйте запрос axios внутри useEffect.

Создайте для этого другую функцию и используйте useCallback. Например:

const fetchPokemon = useCallback(() => {
 axios.get(`https://pokeapi.co/api/v2/pokemon/${id}`)
   .then((res) => {
     setPokemon(res.data);
   })
   .catch(() => {}
}, [id])


useEffect(() => {
 fetchPokemon()
}, [fetchPokemon])

Если вы передадите pokemon в массив зависимостей, он будет обновляться каждый раз, когда вы вызываете setPokemon с момента обновления покемона, иначе говоря, у вас есть бесконечный цикл.

1

Devchris 13 Июл 2020 в 13:08

Question 2

Не используйте запрос axios внутри useEffect.

Создайте для этого другую функцию и используйте useCallback. Например:

const fetchPokemon = useCallback(() => {
 axios.get(`https://pokeapi.co/api/v2/pokemon/${id}`)
   .then((res) => {
     setPokemon(res.data);
   })
   .catch(() => {}
}, [id])


useEffect(() => {
 fetchPokemon()
}, [fetchPokemon])

Если вы передадите pokemon в массив зависимостей, он будет обновляться каждый раз, когда вы вызываете setPokemon с момента обновления покемона, иначе говоря, у вас есть бесконечный цикл.

1

Devchris 13 Июл 2020 в 13:08

Бесконечный цикл UseEffect с массивом зависимостей

1 ответ

Похожие вопросы

Новые вопросы

reactjs