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

1 个答案: