javascript - 如何在 React.js 中渲染页面之前等待 fetch 完成

Question

在此 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>

    )}

}

Answer 1

您必须首先检查 gifs 数组是否不为空。当setState完成后，render会再次触发，这次会有gifs来映射。

    let gifArray = '';

    if (this.state.gifs.length > 0) {
        gifArray = this.state.gifs.map((gif) => {
          return <GifCard key={gif.name} gif={gif}/>
        })
    }