Javascript 如何在React.js中呈现页面之前等待获取完成

在这个React组件中，我试图从giphyapi获取数据，并将其呈现在另一个组件中。提取工作正常，但this.state.gifs.map返回错误，因为它在提取完成和状态设置之前运行。我曾尝试将挂钩与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>

    )}

}

---

您必须首先检查gifs数组是否为空。设置状态完成后，渲染将再次触发，这一次将有GIF进行映射

    let gifArray = '';

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

---

您必须首先检查gifs数组是否为空。设置状态完成后，渲染将再次触发，这一次将有GIF进行映射

    let gifArray = '';

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

---

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

你的问题实际上是你得到的数据。我检查了您正在使用的URL的响应，它返回一个对象，其中包含如下数据和分页详细信息：

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

在此对象上使用贴图将导致错误。gif数组位于您应该使用的数据属性中-例如，而不是：

this.setState({gifs})

您可以使用：

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

---

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

你的问题实际上是你得到的数据。我检查了您正在使用的URL的响应，它返回一个对象，其中包含如下数据和分页详细信息：

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

在此对象上使用贴图将导致错误。gif数组位于您应该使用的数据属性中-例如，而不是：

this.setState({gifs})

您可以使用：

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

---

你不必等到抓取完成后再渲染，你可以同时渲染一些加载指示器，或者如果你不关心用户体验，你可以直接返回null；如果提取尚未完成。您可以将提取状态存储在状态中，而不必等到提取完成后再进行呈现，同时呈现一些加载指示符，或者如果您不关心UX，则只需返回null即可；如果提取尚未完成。您可以在state中存储fetch的状态，我不建议这样做-它添加了不必要的逻辑。在空数组上调用map将导致空数组，这很好。React会将空数组呈现为与空字符串相同的nothing，因此如果您将收到相同的输出，请删除。我不建议这样做-它会添加不必要的逻辑。在空数组上调用map将导致空数组，这很好。React会将空数组呈现为与空字符串相同的nothing，因此如果您将收到相同的输出，则删除。