Reactjs 反应：在列表项中相邻显示相关数据

在我的应用程序中，我在一个API调用中进行多个API调用。我的目的是同时从5部电影API调用中获取标题和发布日期，如代码所示，并将标题和相关发布日期相邻显示（，例如《帝国罢工》-1980-05-17）

为此，我使用map函数迭代标题数组并以li显示，但没有得到预期的输出。有人能建议我怎么做吗

App.js

import React, { Component } from 'react'
import charactersFile from "./data/characters.json"
import axios from 'axios';
import './App.css';

class App extends Component {
  state = {
    title: [],
    release_date: []
  }

  componentDidMount() {
    axios.get(`https://swapi.co/api/people/1/`)
      .then(response => Promise.all([
        axios.get(`https://swapi.co/api/films/2/`),
        axios.get(`https://swapi.co/api/films/6/`),
        axios.get(`https://swapi.co/api/films/3/`),
        axios.get(`https://swapi.co/api/films/1/`),
        axios.get(`https://swapi.co/api/films/7/`)
      ]))
      .then(result => result.map(values =>
        this.setState({
          title: [this.state.title, values.data.title],
          release_date: [this.state.release_date, values.data.release_date]
        })))
  }

  render() {
    console.log(this.state.title)
    return (
      <div className="App">
        <ul>
          {this.state.title.map(title => <li>{title}</li>)}
        </ul>
        {/* <h1>{this.state.title}</h1> */}
        <h2>{this.state.release_date}</h2>
      </div>
    )
  }
}

export default App

import React，{Component}来自“React”
从“/data/characters.json”导入字符文件
从“axios”导入axios；
导入“/App.css”；
类应用程序扩展组件{
状态={
标题：[]，
发布日期：[]
}
componentDidMount（）{
axios.get(`https://swapi.co/api/people/1/`)
.然后（响应=>Promise.all([
axios.get(`https://swapi.co/api/films/2/`),
axios.get(`https://swapi.co/api/films/6/`),
axios.get(`https://swapi.co/api/films/3/`),
axios.get(`https://swapi.co/api/films/1/`),
axios.get(`https://swapi.co/api/films/7/`)
]))
.then（result=>result.map（value=>
这是我的国家({
title:[this.state.title，values.data.title]，
发布日期：[this.state.release\u date，values.data.release\u date]
})))
}
render（）{
console.log（this.state.title）
返回(

{this.state.title.map（title=>
{title}
）}

{/*{this.state.title}*/}
{this.state.release_date}
)
}
}
导出默认应用程序

我的输出：

---

与其将电影数据存储在两个不同的数组中进行合并，不如将相关数据存储在一个对象中，然后将每个数据一起渲染

class App extends React.Component {
  state = {
    movies: []
  }

  componentDidMount() {
    axios.get(`https://swapi.co/api/people/1/`)
      .then(response => Promise.all([
        axios.get(`https://swapi.co/api/films/2/`),
        axios.get(`https://swapi.co/api/films/6/`),
        axios.get(`https://swapi.co/api/films/3/`),
        axios.get(`https://swapi.co/api/films/1/`),
        axios.get(`https://swapi.co/api/films/7/`)
      ]))
      .then(result => result.map(values =>
        this.setState({
            movies: [
            ...this.state.movies,
            { title: values.data.title, release_date: values.data.release_date }
          ]
        })))
  }

  render() {
    return (
      <div className="App">
        <ul>
          {this.state.movies.map(movie => (
            <li>
              <div className="title">{movie.title}</div>
              <span>-</span>
              <div>{movie.release_date}</div>
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

类应用程序扩展了React.Component{
状态={
电影：[]
}
componentDidMount（）{
axios.get(`https://swapi.co/api/people/1/`)
.然后（响应=>Promise.all([
axios.get(`https://swapi.co/api/films/2/`),
axios.get(`https://swapi.co/api/films/6/`),
axios.get(`https://swapi.co/api/films/3/`),
axios.get(`https://swapi.co/api/films/1/`),
axios.get(`https://swapi.co/api/films/7/`)
]))
.then（result=>result.map（value=>
这是我的国家({
电影：[
…这是国家电影，
{title:values.data.title，发布日期：values.data.release\u date}
]
})))
}
render（）{
返回(

{this.state.movies.map（movie=>(

{movie.title}
-
{电影发行日期}

))}

)
}
}

那你为什么不把数据放在li中呢？我已经把数据放在li中了。你能详细说明一下吗？像这样的@Riya又是一个有钩子的例子