使用javascript从web API恢复数据的问题

我在React中从Web API恢复一些数据时遇到问题。 下面是API的url:，我将其存储在名为pokeData的状态中

当我尝试console.log（pokeData）时，它工作得非常好。当我尝试console.log（pokeData.types）时总是没有问题！b但是，如果我尝试使用console.log（pokeData.types[0]）在请求中更进一步，则会显示此消息：“类型错误：pokeData.types未定义””

我相信解决办法应该很简单，但我被卡住了。。。如果有人能帮我，那就太好了

---

谢谢：）

我已经为您创建了一个代码沙盒

下面是代码：

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 && pokeData.types[0]);
  console.log(pokeData.types && pokeData.types[1]);

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

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
导入“/styles.css”；
导出默认函数App（）{
常数pokeId=1；
const[pokeData，setPokeData]=useState（[]）；
useffect（（）=>{
axios
.得到(`https://pokeapi.co/api/v2/pokemon/${pokeId}/`）
.然后（（结果，错误）=>{
如果（错误）{
犯错误；
}否则{
setPokeData（结果数据）；
}
});
}，[pokeId]）；
控制台日志（pokeData）；
log（pokeData.types&&pokeData.types[0]）；
log（pokeData.types&&pokeData.types[1]）；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

---

我认为问题在于pokeData.types无法立即使用，因此您必须使用&&operator等待pokeData.types为真。您试图在数据存在之前访问它。非常感谢您的精彩回答！这对我帮助很大。

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 && pokeData.types[0]);
  console.log(pokeData.types && pokeData.types[1]);

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