Javascript 口袋妖怪Api:TypeError:无法读取属性'；类型'；未定义的

我正在使用口袋妖怪API，我遇到了麻烦。这是我第一次遇到问题的原始代码

import React, {useState} from 'react';

const api = {
  base: "https://pokeapi.co/api/v2/pokemon/"
}

function App() {
  const [query, setQuery] = useState('');
  const [pokemon, setPokemon] = useState({});

  const search = evt => {
    if(evt.key === "Enter") {
      fetch (`${api.base}${query}`)
      .then(res => res.json())
      .then(result => {
        setPokemon(result);
        setQuery('');
        console.log(result);
      })
    }
  }

  const weightConverter = weight => {
    return Math.floor(weight / 10) + ".0 kg.";
  }

  const heightConverter = height => {
    return (height / 10) + " m."
  }

  return (
    <div className="wrapper">
      <main>
        <div className="pokedex-search-box">
          <input 
          type="text" 
          className="pokedex-search-bar" 
          placeholder="Search for a Pokémon..."
          onChange={e => setQuery(e.target.value)}
          value={query}
          onKeyPress={search}
          ></input>
        </div>
          <div>
            <div className="pokedex">
              <div className="pokedex-left">
                {pokemon.name}
                <br></br>
                {pokemon.id}
              </div>
              <div>
              <img src={pokemon.sprites.front_default}></img>
              <br></br>
              {pokemon.types[0].type.name}
              <br></br>
              {pokemon.types[1].type.name}
              <br></br>
              {weightConverter(pokemon.weight)}
              <br></br>
              {heightConverter(pokemon.height)}
              </div>
            </div>
          </div>
        </main>
    </div>
  );
}

export default App;

import React，{useState}来自“React”；
常量api={
基数：“https://pokeapi.co/api/v2/pokemon/"
}
函数App（）{
const[query，setQuery]=useState（“”）；
const[pokemon，setPokemon]=useState（{}）；
const search=evt=>{
如果（evt.key==“输入”）{
获取（`${api.base}${query}`）
.then（res=>res.json（））
。然后（结果=>{
setPokemon（结果）；
setQuery（“”）；
控制台日志（结果）；
})
}
}
常量权重转换器=权重=>{
返回数学。地板（重量/10）+“0.0 kg。”；
}
const heightConverter=高度=>{
回程（高度/10）+“m”
}
返回(
setQuery（e.target.value）}
值={query}
onKeyPress={search}
>
{pokemon.name}



{pokemon.id}



{pokemon.types[0].type.name}



{pokemon.types[1].type.name}



{weightConverter（pokemon.weight）}



{heightConverter（pokemon.height）}
);
}
导出默认应用程序；

最初这是我的代码，但在google上查找问题后，我意识到react dom的加载速度比我的api调用快，因为您必须输入搜索，然后才能获取对象。它不能这样做，因为你必须等待搜索输入。在那之后，我添加了这一点来检查对象是否已经被调用，如果没有，则将其设置为空字符串，以便使用搜索

{pokemon.sprites ? (
        <div className="pokedex">
          <div className="pokedex-left">
            {pokemon.name}
            <br></br>
            {pokemon.id}
          </div>
          <div>
          <img src={pokemon.sprites.front_default}></img>
          <br></br>
          {pokemon.types[0].type.name}
          <br></br>
          {pokemon.types[1].type.name}
          <br></br>
          {weightConverter(pokemon.weight)}
          <br></br>
          {heightConverter(pokemon.height)}
          </div>
        </div>
        ) : ('')}

{pokemon.sprites(
{pokemon.name}



{pokemon.id}



{pokemon.types[0].type.name}



{pokemon.types[1].type.name}



{weightConverter（pokemon.weight）}



{heightConverter（pokemon.height）}
) : ('')}

---

这很好，但在几次搜索之后，我又回到了同样的问题“TypeError:无法读取未定义的属性'type'”。我是个新手，所以我有点不知所措。我有一个临时解决方案，适用于前三个口袋妖怪，然后它就坏了。

看起来像是

口袋妖怪。类型[0]

未定义：）@Dominik我试图添加

口袋妖怪.sprites | pokemon.types

，以进行另一次检查，但在第三个口袋妖怪之后我仍然遇到相同的错误。我的语法有问题吗？这不是react的问题，而是pokemon.types[0]或pokemon.types[1]未定义。尝试console.log（pokemon.types[0]，pokemon.types[1]）。console记录pokemon对象并将其发布到此处，以便我们了解数据的形状。（使用

JSON.stringify（pokemon，null，2）

）@Domink我发现，一些pokemon有两种类型，而另一些没有，这就是它在前三种类型之后崩溃的原因。之后，他们有单一的类型。谢谢你的帮助，像

pokemon.types[0]

是未定义的：）@Dominik我试图添加

pokemon.sprites | | pokemon.types

进行另一次检查，在第三个pokemon之后我仍然遇到同样的错误。我的语法有问题吗？这不是react的问题，而是pokemon.types[0]或pokemon.types[1]未定义。尝试console.log（pokemon.types[0]，pokemon.types[1]）。console记录pokemon对象并将其发布到此处，以便我们了解数据的形状。（使用

JSON.stringify（pokemon，null，2）

）@Domink我发现，一些pokemon有两种类型，而另一些没有，这就是它在前三种类型之后崩溃的原因。之后，他们有单一的类型。谢谢你们的帮助