Question

我是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>

我遇到错误

未捕获的TypeError：无法读取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);
        })
    }
  }

Answer 1

获得TypeError的原因是因为您用null初始化了状态，并且在等待响应时模态试图读取pokemon的name属性。当模态中还没有设置口袋妖怪时，您需要处理这种情况，渲染时可以添加 const PokemonModal = ({showModal, closeModal, pokemon}) => { if (!pokemon) {return "Loading..."}` } 或一些加载微调器。

无需在此处恕我直言使用JSON

Answer 2

在selectedPokemon的请求完成之前，undefined将是pokemon.url。

因此，最初<PokemonModal .../>将收到pokemon作为undefined。因此，您会看到错误。

一种解决方法是在if组件中添加一个PokemonModal：

const PokemonModal = ({showModal, closeModal, pokemon}) => {
    if(pokemon && Object.keys(pokemon).length !== 0) {
        // prepare the view and return it
    }
    return null;
}

您也可以在父组件上使用if，但是一般来说，我喜欢在子组件中使用if，以使父组件不会被太多{{ 1}} s

Answer 3

setState是异步的，这就是您的组件在打开模态时发生故障的原因，但是状态可能尚未设置并传播给子代。解决此问题的一种方法是将加载状态添加到模态中。

return (
pokemon&&{
    <Modal>
      <Modal.Title>{pokemon.name}</Modal.Title>
    </Modal>
}

)

如何在React中将JSON对象发送到组件？

3 个答案: