javascript - React 路由器和 props

Question

需要帮助从不同组件传递 Prop

我的路由结构如下

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:无法读取未定义的属性“类型””，该属性位于 localhost:3000/又名主路由上，但是当我手动导航到 localhost:3000/movie/12312 时它可以工作很好

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

Answer 1

在功能组件中，没有 this 或拥有 props 的所有者。直接使用 Prop 。