调用API时如何忽略不存在的返回数据？React宝可梦接口第二属性报错处理

问题根因 #

你当前的报错触发原因是：当宝可梦仅有1种属性时，接口返回的response.data.types数组长度为1，直接强制读取下标为1的元素并访问其type.name属性时，会读取undefined的子属性，抛出类型错误。

解决方案 #

完全可以在setPokemon的逻辑里添加判断处理，这里提供两种实现方式： #

方式1：显式添加if判断

你可以先提前判断types数组的长度，再决定是否赋值type2：

const searchPokemon = () => {
  api.get(`pokemon/charmander`).then((response) => {
    // 先初始化要传入setPokemon的对象
    const pokemonData = {
      name: response.data.name,
      height: response.data.height,
      weight: response.data.weight,
      img: response.data.sprites.front_default,
      id: response.data.id,
      type: response.data.types[0].type.name,
      type2: '' // 先默认赋值为空字符串
    }
    // 判断是否存在第二属性
    if (response.data.types.length > 1) {
      pokemonData.type2 = response.data.types[1].type.name
    }
    setPokemon(pokemonData)

    // 后续接口请求逻辑保持不变
    api.get(`pokemon-species/${response.data.id}/`).then((response) => {
      fetchDescription({
        entry: response.data.flavor_text_entries[0].flavor_text,
        evolution: response.data.evolution_chain.url,
      });
      api.get(`${response.data.evolution_chain.url}`).then((response) => {
        pokemonEvolution({
          evolution: response.data.chain.evolves_to[0].species.name,
        });
      });
    });
  });
};

方式2：用可选链+空值合并运算符简化代码

不用显式写if，用ES6+语法一行就能处理：

setPokemon({
  name: response.data.name,
  height: response.data.height,
  weight: response.data.weight,
  img: response.data.sprites.front_default,
  id: response.data.id,
  type: response.data.types[0].type.name,
  // 如果types[1]存在就读取name，否则赋值为空字符串
  type2: response.data.types[1]?.type.name ?? ''
});

额外优化建议 #

你当前代码还有其他潜在报错风险：

• 读取flavor_text_entries[0]可能拿到非中文的描述文本，也可能出现数组为空的情况
• 进化链读取evolves_to[0]时，如果宝可梦是最终进化形态没有下一阶进化，也会触发和属性一样的报错，也可以用上面的可选链语法处理。

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