如何在React中將JSON對象發送到組件？

Question

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

我正在使用whatwg-fetch向API發出請求。 這會將來自API的數據作為對象保存到狀態“ selectedPokemon”。

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

我想將該數據發送到組件（在我的情況下是模態），所以我更新了模態組件調用以將selectedPokemon狀態包含為prop：

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

我還更新了PokemonModal組件（在PokemonModal.js上），將pokemon作為道具：

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

但是，當我去在PokemonModal使用該道具PokemonModal ，例如：

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

我得到一個錯誤

未捕獲的TypeError：無法讀取null的屬性“名稱”

（這與我嘗試使用的對象的任何其他部分相同，例如pokemon.order和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 imho

Answer 2

在對pokemon.url的請求完成之前， selectedPokemon將是undefined的。

因此，最初， <PokemonModal .../>將收到undefined pokemon 。 因此，您看到此錯誤。

要解決這將是有一個方法if在PokemonModal組件：

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

---

在父組件上也可以有一個if ，但是總的來說，我喜歡在子組件中有if ，以便父組件不會被太多的if弄得一團糟。

Answer 3

setState是異步的，這就是您的組件在打開模態時發生故障的原因，但是狀態可能尚未設置並傳播給子代。 解決此問題的一種方法是將加載狀態添加到模態中。

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