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

【问题标题】：How to wait for fetch to complete before rendering page in React.js如何在 React.js 中渲染页面之前等待 fetch 完成
【发布时间】：2020-06-17 16:16:40
【问题描述】：

在这个 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>

    )}

}

【问题讨论】：

你不要等到提取完成后再渲染，同时渲染一些加载指示器，或者如果你不关心用户体验，你可以return null;如果提取没有还没完呢您可以将获取的状态存储在状态中

标签： javascript reactjs fetch giphy giphy-api

【解决方案1】：

您的加载和状态管理实际上很好 - 在空数组上运行地图不会导致错误。

您的问题实际上与您要返回的数据有关。我检查了您正在使用的 URL 的响应，它返回一个包含数据和分页详细信息的对象，如下所示：

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

在这个对象上使用map 会报错。 gif 数组位于您应该使用的 data 属性中 - 例如而不是：

this.setState({gifs})

你可以使用：

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

【讨论】：

【解决方案2】：

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

    let gifArray = '';

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

【讨论】：

我不建议这样做 - 它增加了不必要的逻辑。在空数组上调用 map 将产生一个空数组，这很好。 React 会将一个空数组呈现为与空字符串相同（什么都没有），因此删除 if 您将收到相同的输出。