React条件渲染优化：避免嵌套数据重复显示组件

// MovieList.js (原始问题代码示例)
import useMovieContext from "../../hooks/useMovieContext";
import MovieShow from "./MovieShow";

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

  // 这里的map操作是导致问题的原因
  const renderedList = movies?.map((movie) =>
    movie.shows.map((show) => { // 对每个电影的每个场次进行映射
      if (show.date === date) {
        // 如果场次日期匹配，则渲染MovieShow组件
        // 注意：如果一部电影有3个匹配的场次，这里会渲染3次MovieShow
        return <MovieShow key={movie.imdbID} movie={movie} link="showtimes" />;
      }
      return null; // 确保没有匹配时返回null
    })
  );

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

// MovieList.js (优化后的代码)
import useMovieContext from "../../hooks/useMovieContext";
import MovieShow from "./MovieShow";

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

  const renderedList = movies?.map((movie) => {
    // 使用 some() 方法判断当前电影是否有任何场次符合选定日期
    if (movie.shows.some((show) => show.date === date)) {
      // 如果有任何场次符合，则只渲染一次 MovieShow 组件
      return <MovieShow key={movie.imdbID} movie={movie} link="showtimes" />;
    }
    return null; // 如果没有符合条件的场次，则不渲染任何内容
  });

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

// MovieShow.js
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();

  // 在 MovieShow 内部，再次对电影的场次进行映射，以显示所有匹配的场次时间
  const renderedTimes = movie.shows?.map((show, index) => { // 添加index作为key的备用
    if (show.date === date) {
      // 为每个匹配的场次渲染 MovieTimes 组件
      return <MovieTimes key={index} show={show} movie={movie} />; // 确保key的唯一性
    }
    return null;
  });

  return (
    <div className="movie-container">
      @@##@@
      <div className="movie-details">
        <h1>{movie.title}</h1>
        <h2>Rated: {movie.rated}</h2>
        <h3>Running Time: {movie.runtime}</h3>
        {/* 这里的日期显示可以根据实际需求调整，例如显示当前筛选的日期 */}
        <h3>Date: {date}</h3> 
        <Link state={{ movie: movie }} to={`/${link}/${movie.imdbID}`}> {/* 使用imdbID作为唯一标识 */}
          <button>More Details</button>
        </Link>
        <div className="movie-times-list">{renderedTimes}</div> {/* 在这里渲染具体的场次时间 */}
      </div>
    </div>
  );
}