Проблема восстановления данных из веб-API с помощью javascript REACT

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

Когда я пытаюсь использовать console.info(pokeData), он работает очень хорошо. Когда я пытаюсь использовать console.info(pokeData.types) всегда без проблем! BНо если я попытаюсь пойти дальше в запросе с помощью console.info(pokeData.types[0]), выводится это сообщение: "TypeError: pokeData.types is undefined".

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.info( pokeData.types)

===> works very well 

console.info( pokeData.types[0])

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

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

Спасибо :)

Вы пытаетесь получить доступ к данным до того, как они существуют.

— 22.12.2020 17:01

javascript reactjs

22.12.2020 16:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я создал для вас песочницу кода 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.info(pokeData);
  console.info(pokeData.types && pokeData.types[0]);
  console.info(pokeData.types && 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 станет истинным, используя оператор &&

Большое спасибо за ваш отличный ответ! Это мне очень помогло.

— 23.12.2020 01:05

22.12.2020 16:59