UseEffect бесконечный l oop с массивом зависимостей - PullRequest
Новая
       101

UseEffect бесконечный l oop с массивом зависимостей

1 голос
/ 13 июля 2020

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

Вот код: 

      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, …}

Спасибо.

1 Ответ

1 голос
/ 13 июля 2020

Не используйте запрос ax ios внутри 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, так как обновление pokemon aka, у вас есть infinte l oop.

...