反应路由器和道具

Question

Need help passing props from different components

my routing structure is as follows

app.js

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

on my Home component, have a bunch of API call's all structured like this

 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 })
  })
}

functional component gets rendered like so

 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 })
    });
   }
  };

functional component (child for 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>
}

I know this is aa lot of code, but I wanted to give you guys the full spectrum.

But basically the issue I'm having is when I do

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

into my functional component, I get 'TypeError: Cannot read property 'type' of undefined', which is on the localhost:3000/ aka home route, but when I manually navigate to localhost:3000/movie/12312 it works fine

so it seems like the issue is that my home route 'localhost:3000/' is not aware of {this.props.type} from itemDetails.. Any ideas?

Answer 1

In functional components, there is no this or the owner having props. Use props directly.

Answer 2

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

try this:

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

if this didn't work, you may wanna provide a sandbox demo for this .