创建电影应用程序和放映时间被嵌入在电影对象数组内的对象数组中。如果有3个放映时间，则时间是复制和渲染电影3次，如果有5个放映时间，则时间是复制和渲染电影5次。尝试为每个电影而不是showtime只呈现MovieShow组件的一个副本。
movies是来自服务器的电影列表，date是在不同放映时间/日期之间切换的状态
电影数据：

module.exports = [
  {
    title: "Inception",
    year: "2010",
    rated: "PG-13",
    released: "16 Jul 2010",
    runtime: "148 min",
    genre: "Action, Adventure, Sci-Fi",
    director: "Christopher Nolan",
    writer: "Christopher Nolan",
    actors: "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page",
    plot: "Dom Cobb is a skilled thief, the absolute best in the dangerous art of extraction, stealing valuable secrets from deep within the subconscious during the dream state, when the mind is at its most vulnerable. Cobb's rare ability has made him a coveted player in this treacherous new world of corporate espionage, but it has also made him an international fugitive and cost him everything he has ever loved. Now Cobb is being offered a chance at redemption. One last job could give him his life back but only if he can accomplish the impossible, inception. Instead of the perfect heist, Cobb and his team of specialists have to pull off the reverse: their task is not to steal an idea, but to plant one. If they succeed, it could be the perfect crime. But no amount of careful planning or expertise can prepare the team for the dangerous enemy that seems to predict their every move. An enemy that only Cobb could have seen coming.",
    country: "United States, United Kingdom",
    awards: "Won 4 Oscars. 159 wins & 220 nominations total",
    poster:
      "https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
    imdbRating: "8.8",
    imdbID: "tt1375666",
    shows: [
      {
        date: "12th June",
        startTime: "14.30pm",
      },
      {
        date: "12th June",
        startTime: "18.30pm",
      },
      {
        date: "12th June",
        startTime: "20.15pm",
      },
      {
        date: "13th June",
        startTime: "22.45pm",
      },
    ],

MovieList组件：

import useMovieContext from "../../hooks/useMovieContext";
import MovieShow from "./MovieShow";

export default function MovieList() {
  const { movies, date } = useMovieContext();

  const renderedList = movies?.map((movie) =>
    movie.shows.map((show) => {
      if (show.date === date) {
        return <MovieShow key={movie.imdbID} movie={movie} link="showtimes" />;
      }
    })
  );

  return <div>{renderedList}</div>;
}

MovieShow组件：

import "../../CSS/Movies/MovieShow.css";
import { Link } from "react-router-dom";
import MovieTimes from "../MoviePage/MovieTimes";
import useMovieContext from "../../hooks/useMovieContext";

export default function MovieShow({ movie, link }) {
  const { date } = useMovieContext();

  const renderedList = movie.shows?.map((show) => {
    if (show.date === date) {
      return <MovieTimes show={show} movie={movie} />;
    }
  });

  return (
    <div className="movie-container">
      <img className="movie-poster" src={movie.poster} alt="" />
      <div className="movie-details">
        <h1>{movie.title}</h1>
        <h2>Rated: {movie.rated}</h2>
        <h3>Running Time: {movie.runtime}</h3>
        <h3>Date: {new Date().toDateString().substring(4)}</h3>
        <Link state={{ movie: movie }} to={`/${link}/${movie._id}`}>
          <button>More Details</button>
        </Link>
        <div className="movie-times-list">{renderedList}</div>
      </div>
    </div>
  );
}

已尝试在shows数组上Map，但它会复制每个电影的MovieShow组件。
已尝试筛选，但这将不起作用，因为无法筛选对象