Javascript Axios多次请求返回不同的对象值

我正在建立一个电影网格，返回他们的Id、缩略图、标题、集号和发布日期

如何在species.names的每个特定视图上显示对象值

getSpecies（）返回对象值，但如何在render方法中传递它们

DetailFilms.js组件：

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

class DetailFilms extends Component {
  state = {
    film: null,
    specie: null,
  }

  getFilms() {
    let id = this.props.match.params.films_id;
    return axios.get('https://swapi.co/api/films/' + id)
      .then(res => {
        this.setState({
          film: res.data
        })
        // console.log(res)
      })
  }

  getSpecies() {
    let id = this.props.match.params.films_id;
    return axios.get('https://swapi.co/api/species/' + id)
      .then((res) => {
        const species = res.data;
        const keys = Object.keys(species)
        console.log(species)
        this.setState({
          species: res.data.results,
          keys: keys
        })
      })
  }

  componentDidMount() {
    this.getFilms();
    this.getSpecies();
  }
  render() {
    const film = this.state.film ? (
      <div className="jumbotron">
        <h2 className="display-4">{this.state.film.title}</h2>
        <p className="lead">{this.state.film.director}</p>
        <hr className="my-4" />
        <p>{this.state.film.producer}</p>
        <p>Episode Nº: {this.state.film.episode_id}</p>
        <p className="font-italic">{this.state.film.opening_crawl}</p>
        <p>Species: {this.state.film.species.name}</p>
        <Link className="btn btn-primary btn-lg" to="/" role="button">Character</Link>
      </div>
    ) : (
      <div className="spinner-border" role="status">
        <span className="sr-only">Loading...</span>
      </div>
    )
    return (
      <div className="d-flex justify-content-center align-items-center ">
        {film}
      </div>
    )
  }
}

export default DetailFilms;

import React，{Component}来自'React'；
从“axios”导入axios；
从'react router dom'导入{Link}；
类扩展组件{
状态={
电影：空，
种类：空，
}
getFilms（）{
设id=this.props.match.params.films\u id；
返回axios.get（'https://swapi.co/api/films/“+id）
。然后（res=>{
这是我的国家({
电影：res.data
})
//console.log（res）
})
}
getSpecies（）{
设id=this.props.match.params.films\u id；
返回axios.get（'https://swapi.co/api/species/“+id）
。然后（（res）=>{
常数物种=资源数据；
常量键=对象键（种类）
控制台日志（种类）
这是我的国家({
种类：res.data.results，
钥匙：钥匙
})
})
}
componentDidMount（）{
这个.getFilms（）；
这个.getSpecies（）；
}
render（）{
const film=this.state.film(
{this.state.film.title}
{this.state.film.director}

插曲编号：{本州电影插曲}

{this.state.film.opening\u crawl}
物种：{这个。州。电影。物种。名称}

性格
) : (
加载。。。
)
返回(
{film}
)
}
}
导出默认电影；

---

&

您在路线中通过的道具，它被称为

films\u id

而不是

species\u id

因此，在您的

getSpecies

方法中，以下是获取当前电影id的方法：

let id=this.props.match.params.films\u id

然后，如果您看到
species
api：

如果您通过id查询它，您将得到与该id对应的物种，而不是该电影的物种

为了获取该电影的所有种类，您需要对根
https://swapi.co/api/species/
，然后检查所有与您看到的详细信息相同的结果。这些将是那部电影的所有种类
 你在路线上通过的道具称为
films\u id
而不是
species\u id

因此，在您的
getSpecies
方法中，以下是获取当前电影id的方法：

let id=this.props.match.params.films\u id

然后，如果您看到
species
api：

如果您通过id查询它，您将得到与该id对应的物种，而不是该电影的物种

为了获取该电影的所有种类，您需要对根
https://swapi.co/api/species/
，然后检查所有与您看到的详细信息相同的结果。这些将是那部电影的所有种类
 
axios.get
不返回值，因此您的
getSpecies（）
调用将始终不返回任何内容。。Axios是一个基于承诺的API。有关用法，请参见：
axios.get
不返回值，因此您的
getSpecies（）
调用将始终不返回任何内容。。Axios是一个基于承诺的API。有关用法，请参见：Thks！但如何传入render方法species.name值？在该物种字段中，您希望显示什么？一般来说，所有的物种，或者那部电影的所有物种？这是一个如何显示它们的例子，但你也需要查询其他页面，因为所有的物种都是37，api每一页返回10个结果：我刚刚做了第一页，向你展示了如何做itThks！但如何传入render方法species.name值？在该物种字段中，您希望显示什么？一般来说，所有的物种，或者那部电影的所有物种？那部电影的所有物种这是一个如何显示它们的例子，但是你也需要查询其他页面，因为所有的物种都是37个，api每一页返回10个结果：我只是做了第一页来告诉你如何做