AxiosとReactのリストを使用したAPIデータの表示

Question

Reactプロジェクトでこのhttps://www.themoviedb.org/documentation/api APIにリクエストを行い、JSONデータを自分のサイトに表示しようとしています。

Axiosを使用してリクエストを行い、適切なJSONデータとconsole.logを取得したり、Firefoxのリアクションツールでリクエストしたりできました。しかし、私は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> 
    ); 

    } 

} 

私はmultileがこれをレンダリングへのアプローチを試みました。私のコードで何が問題なのですか？私のサイトのulにJSONデータがレンダリングされていないのはなぜですか？

Answer 1

私はあなたがあなたのコードは正常に見える成功のfuction内部エラー({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 }); 
     }); 
    }