为什么可以在设置状态之前访问嵌套对象，而不能在设置之后访问嵌套对象？

Question

我正在创建一个Pokedex应用程序，使用React作为练习，因为我刚刚开始学习它，而且我遇到了一些奇怪的问题。因此，到目前为止，基本设置是我有一个PokemonList组件，它基本上是一组单独的PokemonPreview组件的父组件。在创建这些PokemonPreview组件和从pokeapi获取信息时，我遇到了一些问题。下面是我的PokemonPreview组件的示例代码(只是相关的部分)：

const [pokemonInfo, setPokemonInfo] = useState({})

const name = props.pokemon.name.charAt(0).toUpperCase() + props.pokemon.name.slice(1)
const url = props.pokemon.url

useEffect(() => {
    fetch(url)
        .then(res => res.json())
        .then(data => {
            console.log(data.types[0].type.name)
            setPokemonInfo(data)
        })
}, [])

return (
    <div style={{backgroundColor: '#F06430'}} className="pokemon-preview">
        <h3>{name}</h3>
        <h5>#{pokemonInfo.id}</h5>
        <h5>{pokemonInfo.types[0].type.name}</h5>
    </div>
)

名称和url都作为道具从PokemonList组件中传递，然后使用url从pokeapi (例如：https://pokeapi.co/api/v2/pokemon/6)中提取pokemon的全部详细信息。基本上，我正在执行提取请求来获取pokemon的数据，并将整个对象保存为我的状态，这样我就可以在需要时从该对象中提取任何信息。我看到的奇怪的是，我无法从我的状态对象中提取一些信息。下面是存储在state对象中的JSON示例：

{
  "abilities": [
    {
      "ability": {
        "name": "blaze",
        "url": "https://pokeapi.co/api/v2/ability/66/"
      },
      "is_hidden": false,
      "slot": 1
    },
    {
      "ability": {
        "name": "solar-power",
        "url": "https://pokeapi.co/api/v2/ability/94/"
      },
      "is_hidden": true,
      "slot": 3
    }
  ],
  "base_experience": 240,
  "types": [
    {
      "slot": 1,
      "type": {
        "name": "fire",
        "url": "https://pokeapi.co/api/v2/type/10/"
      }
    },
    {
      "slot": 2,
      "type": {
        "name": "flying",
        "url": "https://pokeapi.co/api/v2/type/3/"
      }
    }
  ],
  "weight": 905
}

我要访问的是类型数组中的条目。正如您在我的示例代码中的控制台日志中看到的那样，我能够从请求数据中获取类型数组中的第一个条目，但是如果我试图使用控制台日志或组件的返回从我的状态获取相同的信息，我将得到一个错误：TypeError: Cannot read property '0' of undefined。返回中的pokemonInfo.id部件可以工作，但更嵌套的类型部分不能工作。我真的搞不懂为什么我能在把这个信息设置到我的状态之前得到它，而不是在之后。有人知道为什么会这样吗？我是否应该为pokemon的每一段信息创建单独的状态变量，而不是将其存储在一个大对象中以便稍后取出呢？

谢谢!

Answer 1

好的，错误的原因是您试图在加载信息之前呈现信息，因为pokemon信息是从API获取的。你必须适应这一点。下面是一种基本的技术：

// Set it to null initially, since it's not defined at all
const [pokemonInfo, setPokemonInfo] = useState(null);

...

// Check if the pokemon info is null before trying to access nested data
return (
    <div style={{backgroundColor: '#F06430'}} className="pokemon-preview">
        <h3>{name}</h3>
        {
            pokemonInfo === null ?
            <h5>Loading pokemon data...</h5> :
            <>
                <h5>#{pokemonInfo.id}</h5>
                <h5>{pokemonInfo.types[0].type.name}</h5>
            </>
        }
    </div>
)

当然，确保对象路径都是正确的。