Как дождаться завершения выборки перед отображением страницы в React. js - PullRequest
Новая
       60

Как дождаться завершения выборки перед отображением страницы в React. js

0 голосов
/ 05 марта 2020

В этом компоненте React я пытаюсь получить данные из GIPHY API и отобразить их в другом компоненте. Выборка работает правильно, но this.state.gifs.map возвращает ошибку, поскольку она выполняется до завершения выборки и установки состояния. Я пытался использовать Hooks с async / await, но это тоже не сработало. Как я могу создать gifArray после установки состояния, чтобы я не пытался запустить .map в пустом массиве. 

import React, {Component} from 'react'
import GifCard from './gifCard.js'
import './App.css'

export default class GifContainer extends Component{

  state = {
    gifs: []
  }

  componentDidMount(){
    fetch('http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=KnzVMdxReB873Hngy23QGKAJh6WtUnmz&limit=5')
    .then(res => res.json())
    .then(gifs => {
      this.setState({gifs})
    })
  }


  render(){
    const gifArray = this.state.gifs.map((gif) => {
      return <GifCard key={gif.name} gif={gif}/>
    })
    return(
      <div>
        <h1 id="heading">Gif Search</h1>
        <div id='gifContainer'>
          {gifArray}
        </div>
      </div>

    )}

}

Ответы [ 2 ]

3 голосов
/ 05 марта 2020

Сначала вы должны проверить, не является ли массив gifs пустым. Когда setState будет завершен, рендеринг снова сработает, и на этот раз на карте появятся картинки.

1 голос
/ 05 марта 2020

Ваша загрузка и управление состоянием на самом деле в порядке - запуск карты на пустом массиве не приведет к ошибке.

На самом деле ваша проблема связана с данными, которые вы возвращаете. Я проверил ответ URL-адреса, который вы используете, и он возвращает объект с данными и деталями подкачки, например: 

{
  data: [
    // The gif array
  ],
  pagination: {...},
  meta: {...}
}

Использование map для этого объекта приведет к ошибке. Массив gif находится в свойстве data, которое вы должны использовать - например, вместо: 

this.setState({gifs})

Вы можете использовать: 

this.setState({gifs: gifs.data})
...