将 props 传递给组件 React

Question

我在 React 中传递道具并将它们呈现在我的页面上时遇到问题。我想从我的 App.js 映射我的电影变量，将电影道具（标题、海报、价格} 传递到我的 MovieComponent.js，这样我就可以在页面上呈现它们。

function App() {
  const [filmWorld, setFilmWorld] = useState([]);
  const [cinemaWorld, setCinemaWorld] = useState([]);

  useEffect(() => {
    const theaters = ["cinema", "film"];
    theaters.forEach((theater) => {
      async function getTheater() {
        const data = await api.getMoviesData(theater);
        if (data.Provider === "Film World") {
          setFilmWorld(data);
        } else {
          setCinemaWorld(data);
        }
      }
      getTheater();
    });
  }, []);

  const movies = useMemo(() => {
    if (!filmWorld.Provider) return [];
    return filmWorld.Movies.map((movie, index) => ({
      ...movie,
      cinemaWorldPrice:
        cinemaWorld.Provider && cinemaWorld.Movies[index]?.Price,
    }));
  }, [filmWorld, cinemaWorld]);

  return (
    <Container>
      <Header>
        <AppName>
          <MovieImage src={movieicon1} />
          Prince's Theatre
        </AppName>
      </Header>
      <MovieListContainer>
        {movies.map((movie, index) => (
          <MovieComponent key={index} movie={movie} />
        ))}

        <MovieComponent />
      </MovieListContainer>
    </Container>
  );
}

export default App;

最初我的 MovieComponent 中有 function App() { 到 return 下的所有代码，并且可以在电影组件中呈现。

这是我的电影组件代码：

const MovieComponent = (props) => {
  const { Poster, Price, Title } = props.movie;
  return (
    <MovieContainer>
      <CoverImage src={Poster} alt="" />
      <MovieName>{Title}</MovieName>

      <InfoColumn>
        <MovieInfo>FilmWorld: ${Price}</MovieInfo>
        <MovieInfo>CinemaWorld: ${Price}</MovieInfo>
      </InfoColumn>
    </MovieContainer>
  );
};

export default MovieComponent;

我拥有的最后一个工作代码是当函数和地图在我的 MovieComponent 文件中时，这是旧工作代码的副本：

const MovieComponent = () => {
  const [filmWorld, setFilmWorld] = useState([]);
  const [cinemaWorld, setCinemaWorld] = useState([]);

  useEffect(() => {
    const theaters = ["cinema", "film"];
    theaters.forEach((theater) => {
      async function getTheater() {
        const data = await api.getMoviesData(theater);
        if (data.Provider === "Film World") {
          setFilmWorld(data);
        } else {
          setCinemaWorld(data);
        }
      }
      getTheater();
    });
  }, []);

  const movies = useMemo(() => {
    if (!filmWorld.Provider) return [];
    return filmWorld.Movies.map((movie, index) => ({
      ...movie,
      cinemaWorldPrice:
        cinemaWorld.Provider && cinemaWorld.Movies[index]?.Price,
    }));
  }, [filmWorld, cinemaWorld]);

  return (
    <MovieContainer>
      {movies.map((movie, index) => (
        <div className="movies" key={index}>
          <MovieName>{movie.Title}</MovieName>
          <CoverImage src={movie.Poster} alt={movie.Title} />

          <InfoColumn>
            <MovieInfo>
              Filmworld Price: ${Number(movie.Price).toFixed(2)}
            </MovieInfo>
            <MovieInfo>
              Cinemaworld Price: ${Number(movie.cinemaWorldPrice).toFixed(2)}
            </MovieInfo>
          </InfoColumn>
        </div>
      ))}
    </MovieContainer>
  );
};

export default MovieComponent;

但这影响了我的样式，所以我觉得如果我在 App 中调用函数和映射并在 MovieComponent 中调用道具，我的应用将再次正确呈现。

我收到这样的错误：

Uncaught TypeError: Cannot destructure property 'Poster' of 'props.movie' as it is undefined.

Answer 1

为什么在 App.js 文件中的 map 函数之后第二次调用 MovieComponent 而不传递任何属性给它？尝试删除它，如果有帮助请告诉我。

像这样：

function App() {
  const [filmWorld, setFilmWorld] = useState([]);
  const [cinemaWorld, setCinemaWorld] = useState([]);

  useEffect(() => {
    const theaters = ["cinema", "film"];
    theaters.forEach((theater) => {
      async function getTheater() {
        const data = await api.getMoviesData(theater);
        if (data.Provider === "Film World") {
          setFilmWorld(data);
        } else {
          setCinemaWorld(data);
        }
      }
      getTheater();
    });
  }, []);

  const movies = useMemo(() => {
    if (!filmWorld.Provider) return [];
    return filmWorld.Movies.map((movie, index) => ({
      ...movie,
      cinemaWorldPrice:
        cinemaWorld.Provider && cinemaWorld.Movies[index]?.Price,
    }));
  }, [filmWorld, cinemaWorld]);

  return (
    <Container>
      <Header>
        <AppName>
          <MovieImage src={movieicon1} />
          Prince's Theatre
        </AppName>
      </Header>
      <MovieListContainer>
        {movies.map((movie, index) => (
          <MovieComponent key={index} movie={movie} />
        ))}
      </MovieListContainer>
    </Container>
  );
}

export default App;

将 props 传递给组件 React

Passing props through to component React

components

higher-order-functions

reactjs

react-props