React路由器和道具

Question

需要帮助传递来自不同组件的道具

我的路由结构如下

app.js

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

在我的Home组件上，有一堆API调用都是这样构造的

 getUpcomingMovies = () => {
  axios.get('https://api.themoviedb.org/3/movie/upcoming?api_key=40d60badd3d50dea05d2a0e053cc96c3&language=en-US&page=1')
  .then((res) => {
    console.log(res.data)
    this.setState({ upcomingMovies: res.data.results })
  })
}

函数组件的呈现方式如下

 const UpcomingMovies = (props) => {
  const upcomingMovieResults = props.upcomingMovies.map(r => (
    <Link key={r.id} to={`/details/${r.id}`}>
      <div
        key={r.id} >
        <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='top-movie-results-poster' />
      </div>
    </Link>
  ))
  return <div className='top-movie-results'>
    <h2 className='top-rated-header'>Upcoming Movies</h2>
    <div>
      <Carousel infinite
        slidesPerPage={8}
        slidesPerScroll={3}
        arrows
        animationSpeed={1500}
        stopAutoPlayOnHover
        offset={50}
        itemWidth={225}
        clickToChange
        centered>{upcomingMovieResults}</Carousel></div>
  </div>
}

ItemDetails.js

  fetchItemDetails = (type = this.props.match.params.type) => {
    if (type === 'movie'){
    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);
      console.log(this.props.match.params.type)
      this.setState({ itemDetails: res.data })
    });
   }
  };

功能组件(itemDetails的子组件)

  const MovieDetails = (props) => {
  return <div className='item-details'>
    <div>
      <a href='#t' className='item-name'>{props.itemDetails.title}</a>
      <a href='#t' className='item-name'>{props.itemDetails.name}</a>
    </div>
  </div>
}

我知道这是一个很大的代码，但我想给你们一个完整的频谱。

但基本上我的问题是当我这样做的时候

<Link key={r.id} to={/details/${props.itemDetails.type}/${r.id}}>

在我的功能组件中，我得到了'TypeError: Cannot read property 'type‘of undefined'，它位于localhost:3000/ aka home路径上，但是当我手动导航到localhost:3000/movie/12312时，它工作得很好

所以问题似乎是我的主路由'localhost:3000/‘不知道来自itemDetails的{this.props.type} ..有什么想法吗？

Answer 1

在功能组件中，没有this，也没有拥有道具的所有者。直接使用道具。

Answer 2

<Link key={r.id} to={/details/${props.itemDetails.type}/${r.id}}>

试试这个：

<Link key={r.id} to={/details/${props.itemDetails && props.itemDetails.type}/${r.id}}>

如果这不起作用，你可以使用provide a sandbox demo for this。