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

我正在建立一个电影网格，返回他们的Id、缩略图、标题、集号和发布日期。“Details”的onClick事件已经绑定到：id\u film url

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

&

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;

import React，{Component}来自'React'；
从“axios”导入axios；
从'react router dom'导入{Link}；
类扩展组件{
状态={
胶卷：空
}
componentDidMount（）{
设id=this.props.match.params.films\u id；
axios.get（）https://swapi.co/api/films/“+id）
。然后（res=>{
这是我的国家({
电影：res.data
})
console.log（res）
})
}
render（）{
const film=this.state.film(
{this.state.film.title}
{this.state.film.director}

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

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

了解更多
) : (
加载。。。
)
返回(
{film}
)
}
}
导出默认电影；

首先调用渲染方法

this.state.films

你想要

this.state.film

另外，在get请求中，您正在设置this.state.film=res.data.results。此api上没有“结果”。卸下它，只需使用：

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

---

这在您的代码沙箱中起作用。

首先，您的呈现方法正在调用

this.state.films

你想要

this.state.film

另外，在get请求中，您正在设置this.state.film=res.data.results。此api上没有“结果”。卸下它，只需使用：

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

---

这在您的代码沙盒中起作用。

在渲染中，当您设置状态并发出get请求时，您使用的是film，您使用的是带“s”的This.state.films。这是一个非常明智的建议，我假设您只是在学习react，所以不要对任何API请求使用componentWillMount ComponentDidMount是一个更好的解决方案@为什么？如果我删除了该方法，它将停止工作。@mdiorio我知道，请检查此链接，2分钟读取@谢谢你！我最近发现在DetailFilms.js中我传递了错误的胶片数据。你知道我该怎么解决这个问题吗？太棒了！在渲染中，当您在使用胶片时设置状态并发出get请求时，将this.state.films与“s”一起调用。这是一个非常明智的建议，我假设您只是在学习react，所以不要对任何API请求使用componentWillMount ComponentDidMount是一个更好的解决方案@为什么？如果我删除了该方法，它将停止工作。@mdiorio我知道，请检查此链接，2分钟读取@谢谢你！我最近发现在DetailFilms.js中我传递了错误的胶片数据。你知道我该怎么解决这个问题吗？太棒了！太棒了！但是y怎么能像物种名称一样再次访问数组对象值呢？@GifCo我最近发现在DetailFilms.js中我传递了错误的胶片。你知道我该怎么解决这个问题吗？太棒了@莫迪里奥我不确定我是否明白？最好是在axios.get调用中使用console.log（res）。这样，您可以在Chrome开发工具中查看整个对象，并查看其结构。如果您的意思是单击某个移动以获取更多详细信息，并且您获得了不同的电影详细信息，那么您必须在URL参数HKS中传递错误的电影ID！但是y怎么能像物种名称一样再次访问数组对象值呢？@GifCo我最近发现在DetailFilms.js中我传递了错误的胶片。你知道我该怎么解决这个问题吗？太棒了@莫迪里奥我不确定我是否明白？最好是在axios.get调用中使用console.log（res）。这样，您可以在Chrome开发工具中查看整个对象，并查看其结构。如果您的意思是单击某个移动以获取更多详细信息，并且您获得了不同的电影详细信息，那么您的URL参数中一定传递了错误的电影ID