React JS中如何根据电影类型过滤对象并传递给子组件？

要实现“同类型电影推荐”，你只需要在组件里添加过滤逻辑，筛选出和当前电影共享至少一种类型、且排除当前电影本身的影片数组，再把它传给SubRow组件即可。

具体实现步骤： #

• 先处理当前电影的类型：如果movie.genrer是逗号分隔的字符串（比如"恐怖,悬疑"），就转成数组；如果本身就是数组格式，直接使用即可
• 过滤电影数组，保留满足两个条件的影片：
  1. 影片ID不等于当前电影ID（避免推荐自己）
  2. 影片的类型和当前电影有至少一个交集

修改后的完整代码： #

import { useParams } from "react-router-dom";
import movies from '../data/dataAll'
import SubRow from "./SubRow";

import './MovieDetails.css'

const MovieDetails = () => {
    const { id } = useParams();
    const currentMovieId = parseInt(id);

    // 获取当前电影信息
    const movie = movies.find(movie => movie.id === currentMovieId)

    // 统一处理当前电影的类型格式：字符串转数组（如果需要的话）
    const currentGenres = Array.isArray(movie.genrer) 
      ? movie.genrer 
      : movie.genrer.split(',').map(g => g.trim());

    // 筛选同类型推荐电影
    const recommendedMovies = movies.filter(item => {
        // 统一处理遍历影片的类型格式
        const itemGenres = Array.isArray(item.genrer) 
          ? item.genrer 
          : item.genrer.split(',').map(g => g.trim());
        // 检查是否有共同类型
        const hasMatchingGenre = currentGenres.some(genre => itemGenres.includes(genre));
        // 返回符合条件的影片：排除自身 + 有匹配类型
        return item.id !== currentMovieId && hasMatchingGenre;
    });

    return (
        <div className=" bg-wrapper moviedetails">
            <div className="moviedetails-content bg-wrapper-content">
                <div className="moviedetails-content-info ">
                    <h2 className="movie-title">{movie.title}</h2>

                    <div className="movie-tags">
                    <span>{movie.rating}</span>
                    <span>{movie.type}</span>
                    <span>{movie.duration}</span>
                    </div>

                    <p className="movie-base">{movie.sinopsis}</p>
                    <hr className="line"/>
                    <p><strong>Genre: </strong>{movie.genrer}</p>
                </div>
            </div>

            <div className="banner-background bg-wrapper-image" style={{ backgroundImage: `url(${movie.cover})` }} >

            </div>

            <SubRow recomended={recommendedMovies}></SubRow>

        </div>
    );
}

export default MovieDetails;

补充说明： #

• 如果你的movie.genrer本身就是数组类型，可以删掉字符串转数组的逻辑，直接赋值currentGenres = movie.genrer
• 如果想要更严格的匹配（比如要求影片包含当前电影的所有类型），可以把some换成every，但“你可能还喜欢”场景下，部分类型匹配的推荐逻辑更贴合用户需求
• 过滤后的recommendedMovies就是需要传给SubRow的推荐列表，后续在SubRow组件里遍历这个数组渲染海报即可

内容的提问来源于stack exchange，提问作者Luis Hernandez