Как отправить объект JSON компоненту в React?

Question

Я новичок в React и прохожу учебник, в котором используется API Poke (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: Невозможно прочитать свойство 'name' из 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, и в ожидании ответа модал попытался прочитать свойство name у pokemon.вам нужно разобраться со случаем, когда в модале еще не установлен покемон, при рендеринге вы можете добавить const PokemonModal = ({showModal, closeModal, pokemon}) => { if (!pokemon) {return "Loading..."}` } или некоторый загрузочный счетчик.

здесь не нужно использовать JSON imho

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 в дочернем компоненте, чтобы родительский компонент не загромождался таким количеством if s

Answer 3

setState является асинхронным, поэтому ваш компонент выходит из строя, так как вы открываете модальное состояние, но состояние еще не было установлено и передано дочерним элементам.Один из способов решить эту проблему - добавить состояние загрузки в ваш модальный режим.

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

)