将 props 传入组件进行渲染

Question

// 警告：无法读取未定义的属性（读取 'params'）

// 我尝试从 movielist.js 获取 movie_id 以在 movie.js 上查看单个电影 onclicking view review // 基本上我的错误是无法将道具传递给 movie.js

//在nav/index.js

import { BrowserRouter as Router, Routes, Route, useParams} from "react-router-dom";
import Navbar from './navbar';
import MovieList from "../components/movie-list"
import Movie from "../components/movie"

const Nav = () => {
    return (
        <Router>
            <Navbar/>
            <Routes>
                <Route exact path={'/'} element={<MovieList/>}/>
                <Route path='/movies/:id/' element={<Movie props={useParams()} />} />
        </Routes>
    </Router>
)}

//在movielist.js

import React, {useState, useEffect} from 'react'
import MovieDataService from "../services/movie"
import { Link } from 'react-router-dom'

const MovieList = () => {
        ....
  return (
    <div>
        ....
     <div>
      {movies.map((movie)=>{
        return(
          <div className="card" key={movie._id}>
            <div className="card-container">
              <div className='card-img'>
                <img src={movie.poster+"/100px180"} alt=""/>
              </div>
              <div className="card-body">
                <h1>{movie.title}</h1>
                <h2>Rating:{movie.rated}</h2>
                <p>{movie.plot}</p>
                <Link to={"/movies/"+movie._id}>View Review</Link>
              </div>
            </div>
          </div>
        );
      })}
    </div>
</div>

) }

// 在 movie.js

import React, { useState, useEffect } from 'react'
import MovieDataService from '../services/movie'
import { Link } from 'react-router-dom'

const Movie = (props) => {


useEffect(()=>{
getMovie(props.match.params.id)
},[props.match.params.id]) //won't call getMovie Multiple times unless id is updated.

return (
<div>
  <div className="card-container">
    <div className='card-img'>
      <img src={movie.poster+"/100px250"} alt=""/>
    </div>
    <div className="card-body">
      <h1>{movie.title}</h1>
      <p>{movie.plot}</p>
      {props.user && <Link to={"/movies/"+props.match.params.id+"/review"}>Add Review</Link>
      }
    </div>
  </div>
      );
    })}
  </div>
</div>

) }

Answer 1

如果你需要传递 props 为什么在 MovieList 中使用 Map 时不传递它？

import React, {useState, useEffect} from 'react'
import MovieDataService from "../services/movie"
import { Link } from 'react-router-dom'
import {movie} from "./movie" // change this path to your movie folder path
const MovieList = () => {
        ....
  return (
    <div>
        ....
     <div>
      {movies.map((movie)=>{
        return(
          <Movie title={movie.title} plot={movie.plot} rated={movie.rated} image={movie.poster}/>
        );
      })}
    </div>
</div>

在此之后，您将在 movie component 中看到 props。尝试 console.log 使用 useEffect

Answer 2

使用 useParams() 钩子获取 url 参数。

const {id} = useParams()

useEffect(()=>{
getMovie(id)
},[id])

到处用id替换props.match.params.id

将 props 传入组件进行渲染

pass in props into component to render

javascript

reactjs