javascript - ComponentDidMount 和 Axios 设置状态之前的组件渲染

Question

好的，所以在 render 方法中，我将 gifs 状态传递给我的 GifList 组件，问题是当我尝试在该组件中使用该数组时，通过 props 它说它未定义，经过进一步审查，我可以看到 gifs 属性在由于 Axios 是异步的，在 setState 将其设置为生命周期 Hook 中我的 Axios 调用的返回值之前，应用程序的状态最初作为空数组传递。我该如何解决这个问题？？

import React, { Component } from 'react';
import axios from "axios";
import styles from './App.css';

import Header from './Components/Header/Header';
import GifList from './Components/GifList/GifList';


class App extends Component {

  state = {
    title: "Giphy Search App",
    gifs: []
  }

  componentDidMount() {
     axios.get("http://api.giphy.com/v1/gifs/search? q=funny+cat&limit=20&api_key=ms344CewNH5NEbybHwQifMZImoQfEQ38")
        .then((res) => {
          const arr = res.data.data;
          this.setState({ gifs: arr });
      });
  }

  render() { 
    return (
      <div className={styles.app}>
      <Header title={this.state.title}/>
      <GifList gifList={this.state.gifs}/>
    </div>
  );
 }
}

export default App;

Answer 1

您可以等到 gifs 数组中有内容后再呈现您的 GifList。这基本上是 jsx 的内联 if 语句。

render() {
  return (
    <div className={styles.app}>
      <Header title={this.state.title}/>
      {this.state.gifs.length > 0 && <GifList gifList={this.state.gifs}/>}
    </div>
  );
}