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

我正试图对此提出请求 https://www.themoviedb.org/documentation/api 然后在我的站点上显示JSON数据。

我正在使用Axios发出请求,我已经能够发出请求并获得适当的JSON数据和控制台。在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数据呈现不在我的站点上?