React 无法访问对象内部的数组

Question

我正在尝试访问对象中的数组。对象形式为：

{memes : { 
    data: {memes: Array(100)}
    success: true 
}}


import React from 'react';
import API from './functions/api';
import styles from './App.module.css';

class App extends React.Component {

  state = {
    memes: []
  }

  componentDidMount(){
    API.get().then(
      res => {
        // axios function returns Object
        const memes = res.data

        this.setState({ memes })
      }
    )
  }

  displayMemes(){

    console.log( this.state.memes );
    
    // memes: {
    //   data: {
    //     memes: Array(100)
    //   }
    // }

    this.state.memes.data.memes.forEach( meme => { 
      // Cannot read properties of undefined (reading 'forEach')...
    });
  }

  render(){
    return(
      <div className={ styles.container }>
        { this.displayMemes() }
      </div>
    )
  }
}

export default App;

很明显我不知道我做错了什么，我对此很陌生，解决方案必须很简单。

我正在尝试从开放的 API ('https://api.imgflip.com/get_memes') 中获取数据，以练习实现不同类型的 React 应用程序。

Answer 1

        const memes = res.data.memes

        this.setState({ memes })

Answer 2

调用 API 是一个异步操作，需要一些时间来解决。
您可以先用空值初始化memes。

state = {
  memes: null
}

在调用 displayMemes 之前检查 memes 是否不为空，以便在获得 API 响应之前阻止调用它。

  render(){
    return(
      <div className={styles.container}>
        {this.state.memes && this.displayMemes()}
      </div>
    )
  }

Answer 3

forEach 函数在遍历数组后总是returns未定义。将其更改为 map which returns 一个数组。

class App extends React.Component {
  state = {
    memes: null,
    isLoading: true
  };

  componentDidMount() {
    fetch("https://api.imgflip.com/get_memes")
      .then((res) => res.json())
      .then((memes) => {
        this.setState({ memes });
        this.setState({ isLoading: false });
      });
  }

  displayMemes() {
    return this.state.memes.data.memes.map((meme) => {
      return <div>{meme.name}</div>;
    })
  }

  render() {
    return this.state.isLoading ? "No memes" : <div>{this.displayMemes()}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我添加了 isLoading 以在获取数据时调用 displayMemes。

React 无法访问对象内部的数组

React Can't Access Array Inside Object

javascript

reactjs

axios