我是 React 新手，正在学习使用 Poke API（ https://pokeapi.co ）的教程。

我正在使用 whatwg-fetch 向 API 发出请求。这会将 API 中的数据作为对象保存到状态“selectedPokemon”。

    this.state = {
      // other states
      showModal: false,
      selectedPokemon: null
    };

我想将这些数据发送到一个组件（在我的情况下是模态框），因此我更新了模态框组件调用以将 selectedPokemon 状态作为道具包含进去：

<PokemonModal pokemon={this.state.selectedPokemon} closeModal={this.handleModalClose} showModal={this.state.showModal} />

我还更新了我的 PokemonModal 组件（在 PokemonModal.js 上）以将 pokemon 作为道具包含进去：

const PokemonModal = ({showModal, closeModal, pokemon}) => {

但是，当我要在 PokemonModal 中使用该道具时，例如：

<Modal.Title>{pokemon.name}</Modal.Title>

我收到错误

Uncaught TypeError: Cannot read property 'name' of null

（这与我尝试使用的对象的其他任何部分都一样，例如 pokemon.order 。 showModal 和 closeModal 属性按预期工作。）

有人知道我如何将 JSON 对象发送并使用到另一个组件吗？

如果重要的话，我的获取函数就是这样设置的。 console.log 返回预期结果，即来自以下对象： https://pokeapi.co/api/v2/pokemon/10125/

  handleModalOpen(pokemon) {
    if(pokemon.url !== undefined) {
      fetch(`${pokemon.url}`)
        .then(response => {
          return response.json();
        })
        .then(json => {
          this.setState({
            selectedPokemon: json,
            showModal: true
          }) 
          console.log('selected: ' + this.state.selectedPokemon);
        })
        .catch(ex => {
          console.log('pasrsing failed ' + ex);
        })
    }
  }