Question

我正在构建一个电影网格，以返回其ID，缩略图，标题，剧集编号和发行日期。 “ Details”的onClick事件已经绑定到：id_film url。

如何在每个特定的视图上显示正确的胶片对象值，例如所有物种名称？

CodeSandbox Demo和Api Documentation Swapi

DetailFilms.js组件：

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

class DetailFilms extends Component {
  state = {
    film: null
  }
  componentDidMount() {
    let id = this.props.match.params.films_id;
    axios.get('https://swapi.co/api/films/' + id)
      .then(res => {
        this.setState({
          film: res.data
        })
        console.log(res)
      })
  }
  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}</p>
        <Link className="btn btn-primary btn-lg" to="/" role="button">Learn more</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;

Answer 1

首先，您的渲染方法正在调用

this.state.films

你想要

this.state.film

也在您的get请求中，您正在设置this.state.film = res.data.results此api没有“结果”。删除它，然后使用：

this.setState({
    film: res.data
})

这可以在您的代码沙箱中使用。

将数据对象传递到另一个视图-React

1 个答案: