React组件异步获取Pokemon数据渲染类型数组时遇null报错问题

你碰到的这个坑其实是React组件render函数的执行逻辑导致的——虽然你在渲染pokeCard的时候用了三元判断确保pokemon存在后才渲染内容，但listTypes的定义是写在render函数最顶部的，每次render都会先执行这段代码。

当组件刚挂载、还没拿到接口返回的数据时，this.state.pokemon还是初始值null，这时候调用pokemon.types.map()就会直接抛出Cannot read properties of null的错误，根本轮不到后面的三元判断生效。

给你两种简单的修复方案：

方案一：给listTypes的定义加上存在判断 #

render(){
  const {pokemon} = this.state;
  // 先确认pokemon存在，再处理types数组
  const listTypes = pokemon ? pokemon.types.map((type) => (
    // 注意：Pokemon API返回的type结构是type.type.name，不是直接type.name！
    // 另外React列表项必须加key属性
    <li key={type.type.name}>{type.type.name}</li>
  )) : null;

  const pokeCard = pokemon ? (
    <div className="poke-details">
      <img src={pokemon.sprites.front_default} alt={`${pokemon.name} front`}/>
      <h3 className="card-title">{pokemon.name}</h3>
      <ul>{listTypes}</ul>
    </div>
  ) : (
    <div className="center">Loading Pokemon...</div>
  )
  return(
    <div className="container">
      {pokeCard}
    </div>
  )
}

方案二：把map逻辑直接放到pokeCard的true分支里（更简洁） #

既然三元判断的true分支已经确保pokemon存在，那直接在这个分支里处理types数组就不会有问题：

render(){
  const {pokemon} = this.state;
  const pokeCard = pokemon ? (
    <div className="poke-details">
      <img src={pokemon.sprites.front_default} alt={`${pokemon.name} front`}/>
      <h3 className="card-title">{pokemon.name}</h3>
      <ul>
        {pokemon.types.map((type) => (
          <li key={type.type.name}>{type.type.name}</li>
        ))}
      </ul>
    </div>
  ) : (
    <div className="center">Loading Pokemon...</div>
  )
  return(
    <div className="container">
      {pokeCard}
    </div>
  )
}

额外提醒：别忘了Pokemon API返回的types数组里，每个元素的结构是{ type: { name: "xxx" } }，你原代码里的type.name是取不到值的，要改成type.type.name才行~

内容的提问来源于stack exchange，提问作者notmynamelastname