为什么我得到 Uncaught (in promise) TypeError: Cannot read property 'type' of undefined?

时间:2021-07-24 02:07:30

标签: javascript arrays object promise

这是我为控制台记录我想要的数据而编写的初始代码

const fetchPokemon2 = () =>
  {
  for (let i = 1; i <= 151; i++) 
    {
    const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
    fetch(url)
      .then( res => res.json())
      .then( data => 
        {
        console.log(data);
        const pokemon = {}

        if (data.types['1'])
          {
          pokemon['name']   = data.name;
          pokemon['id']     = data.id;
          pokemon['sprite'] = data.sprites['front_default'];
          pokemon['type1']  = data.types["0"].type.name;
          pokemon['type2']  = data.types["1"].type.name;   
          } 
        else 
          {
          pokemon['name']   = data.name;
          pokemon['id']     = data.id;
          pokemon['sprite'] = data.sprites['front_default'];
          pokemon['type1']  = data.types["0"].type.name;
          }
        console.log(pokemon);
        })
    }
  }
fetchPokemon2();

效果很好,但这不是推荐的方法,所以我正在尝试这样做

const fetchPokemon = () =>
  {
  const promises = [];
  for (let i = 1; i <= 151 ; i++) 
    {
    const url = `https://pokeapi.co/api/v2/pokemon/${i}`
    promises.push(fetch(url).then(resp => resp.json()));
    };
  Promise.all(promises).then( results => 
    {
    const pokemon = results.map(data => 
      ( { name   : data.name
        , id     : data.id
        , sprite : data.sprites["front_default"]
        , type   : data.types["0"].type.name
        , type2  : data.types["1"].type.name
        }
      ));
    console.log(pokemon);
    });
  };
fetchPokemon()

不过这行代码

<块引用>

type2:data.types["1"].type.name
正在给出错误未捕获(承诺)
类型错误:无法读取未定义的属性“类型”

这让我很困惑,因为这个 type: data.types["0"].type.name 非常好,谁能帮我解决这个问题?

2 个答案:

答案 0 :(得分:1)

当指定的数组或对象索引没有值时会发生这种情况。这意味着 data.types[1] 可能是未定义的,因此 data.types[1].type...

的错误 Cannot read property 'type' of undefined

在第二个代码示例中,您没有检查 data.types[1] 是否存在。您始终可以通过以下方式安全地访问该值:

...
type2: data.types[1] && data.types[1].type && data.types[1].type.name
...

答案 1 :(得分:0)

在 API 响应中,某些值在 types 数组中只有 1 个元素。这可能是问题所在。在分配数据之前,您需要检查数据是否存在。

type2: data.types[1] && data.types[1].type && data.types[1].type.name