javascript - axios 多次请求返回不同的对象值

Question

我正在构建一个电影网格，返回其 ID、缩略图、标题、剧集编号和发行日期。

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

getSpecies() 它返回对象值，但我如何在渲染方法中传递它们？

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;

CodeSandbox Demo & Api Documentation Swapi

Answer 1

您通过路线传递的 Prop ，称为films_id而不是species_id。

因此，在您的 getSpecies 方法中，您应该如何获取当前电影的 id:

let id = this.props.match.params.films_id;

然后，如果您看到 species api:https://swapi.co/api/species/

如果通过id查询，会得到该id对应的物种，但不是该电影的物种。

为了获取该电影的所有物种，您需要向根 https://swapi.co/api/species/ 发出 HTTP get 请求，然后检查所有结果其中有您正在看到的细节的电影。这些将是那部电影的所有物种。