React中如何通过id属性获取特定对象数据？map/find报错求解

核心问题分析 #

1. 类型不匹配：useParams()获取的id是字符串类型，而你的数据中id是数字类型，直接全等匹配会失败。
2. 方法使用错误：原代码用map遍历仅返回布尔值，未赋值给变量，且应该用find()精准定位单个匹配对象，而非map。
3. 数据结构验证：需确保从../data/data导入的movies是数组类型，否则find()/map()会抛出类型错误。

修正后的完整代码 #

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

const MovieDetails = () => {
    const { id } = useParams();
    // 将字符串id转为数字，再匹配数组中的对象
    const movie = movies.find(movie => movie.id === Number(id));

    // 处理无匹配项的边界情况
    if (!movie) {
        return <div className="moviedetails">未找到该电影</div>;
    }

    return (
        <div className="moviedetails">
            <h2>{movie.title}</h2>
            <p>{movie.sinopsis}</p>
            <span>时长：{movie.duration}</span>
            <span>类型：{movie.genrer}</span>
            {/* 可根据需求继续渲染其他字段 */}
        </div>
    );
}

export default MovieDetails;

额外验证步骤 #

1. 确认data.js的导出格式正确：

   // data.js 示例
   const trending = [/* 你的电影数据数组 */];
   export default trending;
   

2. 若仍报错movies.find is not a function，在组件内添加console.log(movies)，检查导入的数据是否为数组类型，避免导入单个对象或非数组结构。

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