我是 React 新手，我正在使用 PokeAPI 制作一个小应用程序。我有一个名为 PokemonDetail 的组件，我想在其中显示 pokemon 的详细信息，但应用程序向我抛出了下一个错误

TypeError: Cannot read property 'front_default' of undefined

我的组件如下所示：

import React from "react";

const PokemonDetail = ({ pokemon }) => {
  return (
    <div>
      <div className="text-center">{pokemon.name}</div>
      <img src={pokemon.sprites.front_default} alt={pokemon.name} />
      {pokemon.id}
    </div>
  );
};

export default PokemonDetail;

并且 PokemonDetail 从中接收 pokemon 属性的应用程序组件如下所示：

import React from "react";
import PokeAPI from "../apis/PokeAPI";
import SearchBar from "./SearchBar";
import PokemonDetail from "./PokemonDetail";

class App extends React.Component {
  state = { pokemon: '' };

  onTermSubmit = async term => {
    try {
      const response = await PokeAPI.get(`pokemon/${term}`);
      this.setState({ pokemon: response.data });
      console.log(response);
    } catch (error) {
      console.log("No existe");
    }
  };

  render() {
    return (
      <div className="container">
        <div className="row mt-3">
          <div className="col">
            <SearchBar onFormSubmit={this.onTermSubmit} />
          </div>
        </div>
        <div className="row mt-3">
          <div className="col-9" />
          <div className="col-3">
            <PokemonDetail pokemon={this.state.pokemon} />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

我不明白为什么它会向我抛出这个错误，因为只有使用这个和 json 的其他属性才会抛出它。使用 name 属性有效，并等到我向它发送一些属性，使用 id 也是一样，但使用 front_default 属性无效，它是图像的 url。