Реагировать роутер и реквизит

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 'undefined', который находится на локальном маршруте: 3000 / aka home route, но когда я вручную перехожу к localhost: 3000 / movie / 12312отлично работает

, поэтому кажется, что проблема в том, что мой домашний маршрут 'localhost: 3000 /' не знает {this.props.type} из itemDetails .. Есть идеи?

Answer 1

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

попробуйте это:

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

, если это не сработало, вы можете предоставить демонстрационную версию песочницы для этого .

Answer 2

В функциональных компонентах this или владелец не имеет реквизита.Используйте реквизит напрямую.