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：无法读取未定义的属性'type'，位于localhost：3000 /本地路由上，但是当我手动导航到localhost：3000 / movie / 12312时，它可以工作很好

所以看来问题出在我的本地路由“ localhost：3000 /”不知道itemDetails中的{this.props.type}。有什么想法吗？

Answer 1

在功能组件中，没有AzCopy或所有者没有道具。直接使用道具。

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。

反应路由器和道具

2 个答案: