使用 Axios 和 React 中的列表显示 API 数据

Question

我正在尝试在 React 项目中对此 https://www.themoviedb.org/documentation/api API 发出请求，然后在我的网站上显示 JSON 数据。

我正在使用 Axios 发出请求，我已经能够发出请求并获得适当的 JSON 数据和 console.log 它或在 Firefox 的 React 工具中查看它。但是，我很难在 ul 中显示数据。最初我有一个关于为每个列表项设置唯一键的错误，我已经解决了这个问题（或者我相信）。

这是我的请求以及我尝试呈现数据的方式：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }

  componentDidMount() {
    axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=*apikeyhere*&language=en-US&page=1`)
      .then(res => {
        const posts = res.data.results.map(obj => [obj.title, obj.overview]);
        this.setState({ posts });
      });
  }

/*  render() {
    return (
      <div>
        <h1>Movie API data</h1>
        <ul>
          {this.state.posts.map(post =>
              <li key={post.toString()}>{post.title}</li>
            )}
        </ul>
      </div>
    );
  }
}
*/

  render() {
    return (
      <ul>
        {this.state.posts.map(function(post, index){
          return (
              <div key={index}>
                <h1>{post.title}</h1>
                <p>{post.overview}</p>
              </div>
            )
          }
        )}
      </ul>
    );

  }

}

如您所见，我尝试了多种方法来呈现它。我的代码有什么问题，为什么我网站上的 ul 中的 JSON 数据没有呈现？

Answer 1

我认为，你在成功函数中有一个错误({title: obj.title, overview: obj.overview})

componentDidMount() {
    axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=*apikeyhere*&language=en-US&page=1`)
      .then(res => {
        const posts = res.data.results.map(obj => ({title: obj.title, overview: obj.overview}));
        this.setState({ posts });
      });
  }

使用 Axios 和 React 中的列表显示 API 数据

Display API data using Axios and a list in React

json

rendering

reactjs

axios