Блог

У меня возникла проблема с восстановлением некоторых данных из веб-API в React. Вот URL-адрес API: https://pokeapi.co/api/v2/pokemon/1 /, который я сохранил в состоянии с именем pokeData.

Когда я пытаюсь console.log(pokeData), он работает очень хорошо. Когда я пытаюсь console.log(pokeData.types), всегда никаких проблем! Но если я попытаюсь продолжить запрос с помощью console.log(pokeData.types[0]), отобразится следующее сообщение: «Ошибка типа: pokeData.types не определена«.

 const [pokeData, setPokeData] = useState([])

useEffect(() => {
    axios.get(`https://pokeapi.co/api/v2/pokemon/${pokeId}/`)
    .then((result, err) => {
        if (err) {
          throw err;
        } else {
          setPokeData(result.data) 
        }
    })  
  },[pokeId]);


console.log( pokeData.types)

===> works very well 

console.log( pokeData.types[0])

===> "TypeError: pokeData.types is undefined"

 

Я уверен, что решение должно быть простым, но я застрял… Если бы кто-нибудь мог мне помочь, это было бы здорово!

спасибо 🙂

Я создал для вас песочницу кода https://codesandbox.io/s/fast-browser-0s8xu?file=/src/App.js:0-726

здесь также приведен код:

 import React, { useEffect, useState } from "react";
import axios from "axios";
import "./styles.css";

export default function App() {
  const pokeId = 1;
  const [pokeData, setPokeData] = useState([]);

  useEffect(() => {
    axios
      .get(`https://pokeapi.co/api/v2/pokemon/${pokeId}/`)
      .then((result, err) => {
        if (err) {
          throw err;
        } else {
          setPokeData(result.data);
        }
      });
  }, [pokeId]);
  console.log(pokeData);
  console.log(pokeData.types amp;amp; pokeData.types[0]);
  console.log(pokeData.types amp;amp; pokeData.types[1]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
 

Я считаю, что проблема заключается в том, что pokeData.types недоступен сразу, поэтому вы должны дождаться, пока pokeData.types станет true, используя оператор amp;amp;