將 props 傳遞給組件 React

Question

我無法在 React 中傳遞我的道具並將它們呈現在我的頁面上。 我想通過 App.js 中的電影變量 map 將電影道具（標題、海報、價格} 傳遞到我的 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; 

最初我有 function App() { 下的所有代碼以返回我的 MovieComponent 並可以在電影組件中呈現。

這是我的電影組件代碼：

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;

我擁有的最后一個工作代碼是當函數和 map 在我的 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 中調用函數和 map 並在 MovieComponent 中調用道具，我的應用程序將再次正確呈現。

我收到這樣的錯誤：

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

Answer 1

為什么在App.js文件中的 map function 之后第二次調用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;