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

Question

這是我為控制台記錄我想要的數據而編寫的初始代碼

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
正在給出錯誤未捕獲（承諾）
類型錯誤：無法讀取未定義的屬性“類型”

這讓我很困惑，因為這種類型：data.types["0"].type.name非常好，誰能幫我解決這個問題？

Answer 1

當指定的數組或對象索引沒有值時會發生這種情況。 這意味着data.types[1]可能是未定義的，因此錯誤無法讀取data.types[1].type...的 undefined 屬性 'type' data.types[1].type...

在第二個代碼示例中，您沒有檢查data.types[1]存在。 您始終可以通過執行以下操作安全地訪問該值：

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

Answer 2

在 API 響應中，某些值在 types 數組中只有 1 個元素。 這可能是問題所在。 在分配數據之前，您需要檢查數據是否存在。

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