React Router 在组件之间共享数据答案

【问题标题】：React Router sharing data between componentsReact Router 在组件之间共享数据
【发布时间】：2019-05-16 06:18:42
【问题描述】：

我在我的 react 应用程序中设置了动态路由，当用户单击图像时，它会导航到带有 url /details/:id 的新路由：

<div className='App'>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route exact path='/details/:id' component={ItemDetails} />
      </Switch>
 </div>

它来自我的功能组件：

const headerImages = (props) => {
  const imageResults = props.trending.slice(0, 5).map(r => ( // Grab firt 5 array objects
    <Link key={r.id} to={`/details/${r.id}`}>
      <div key={r.id}>
        <img key={r.id} src={`https://image.tmdb.org/t/p/w1280${r.backdrop_path}`} alt={r.title} className='header-image' />
        <h1 className='now-playing'>Latest</h1>
        <h1 className='header-title'>{r.title}</h1>
        <h4 className='header-details'>{r.overview}</h4>
      </div>
    </Link>
  ))
  return <div className='header-images'>
    <Carousel infinite autoPlay={4500}>{imageResults}</Carousel>
  </div>
}

export default headerImages

ItemDetails 是一个基于类的组件，它有一个 API 调用，我如何从我的功能组件中获取 r.id 值到我的 Api 调用中？

class ItemDetails extends Component {
  constructor (props) {
    super(props)
    this.state = { selectedItem: null }
  }

  fetchItemDetails = () => {
    axios.get('https://api.themoviedb.org/3/movie/${this.props.r.id}?api_key=40d60badd3d50dea05d2a0e053cc96c3&language=en-US')
    .then((res) => {
      console.log(res.data.results)
    })
  }

  componentDidMount(){
    this.fetchItemDetails()
  }
  
  render () {
    return <h1>test</h1>
  }
}

目前 API 调用返回 undefined，但正如您所见，我正在尝试将动态 id 传递给调用。

更新的解决方案：

class ItemDetails extends Component {
  constructor (props) {
    super(props)
    this.fetchItemDetails = this.fetchItemDetails.bind(this)
  }
  

  fetchItemDetails = (itemId = this.props.match.params.id) => {
    axios.get('https://api.themoviedb.org/3/movie/${itemId}?api_key=40d60badd3d50dea05d2a0e053cc96c3&language=en-US')
    .then((res) => {
      console.log(res.data.results)
    })
  }

  componentDidMount(){
    this.fetchItemDetails()
  }
  
  render () {
    return <h1>test</h1>
  }
}

export default ItemDetails

【问题讨论】：

标签： reactjs ecmascript-6 react-router themoviedb-api

【解决方案1】：

您可以使用： const id = this.props.match.params.id

获取 id 并从该特定 id 获取数据。

【讨论】：

当前得到'Cannot read property 'props' of undefined'

【解决方案2】：

这是因为你没有将 this 绑定到试图访问 props 的函数。

在构造函数中添加：

this.fetchItemDetails = this.fetchItemDetails.bind(this);

并且 url 应该使用模板文字 ` 而不是引号 '

`https://api.themoviedb.org/3/movie/${itemId}?api_key=40d60badd3d50dea05d2a0e053cc96c3&language=en-US`

【讨论】：

仍然无法正常工作，不确定我是否正确我已根据您的建议更新了原始帖子
您还可以使用单引号 ' 而不是文字 `

【解决方案3】：

试试这个：

import React, { Component } from 'react';
import axios from 'axios';

export default class ItemDtails extends Component {
  fetchItemDetails = () => {
    const itemId = this.props.match.params.id;
    const ROOT_URL = 'https://api.themoviedb.org/3/movie';
    const API_KEY = 'api_key=40d60badd3d50dea05d2a0e053cc96c3&language=en-US';

    axios.get(`${ROOT_URL}/${itemId}?${API_KEY}`).then(res => {
      console.log(res.data.results);
    });
  };

  componentDidMount() {
    this.fetchItemDetails()
  }

  render() {
    return <div>Test...</div>;
  }
}

【讨论】：