如何在React中使用useState Hook获取电影API对象的属性值

问题分析 #

你当前代码把API返回的整个顶层对象（包含movies键）存在了moviesList状态中，但要获取具体电影详情，得先拿到movies数组，再从中提取单部电影的信息。另外初始状态设为{}不够合理，建议调整为数组类型，避免后续操作报错。

修复方案 #

1. 调整状态存储逻辑

直接将API返回的data.movies数组存入状态，后续操作会更直接：

// 初始状态设为空数组，匹配最终存储的数据类型
const [moviesList, setMoviesList] = useState([]);

const getMovies = async () => {
    const response = await fetch(
      "https://run.mocky.io/v3/55492543-1c03-4b5e-8ff4-28bbd2638780"
    );
    const data = await response.json();
    // 只存储movies数组，而非整个顶层对象
    setMoviesList(data.movies);
};

useEffect(() => {
    getMovies();
}, []);

2. 获取具体电影详情的两种常用方式

方式一：遍历展示所有电影详情

如果要批量展示所有电影的信息，用map遍历数组即可：

return (
  <div className="movies-container">
    {moviesList.map(movie => (
      <div key={movie.id} className="movie-card">
        <h3>{movie.Name}</h3>
        <p>上映日期：{movie.releasedate}</p>
        <p>类型：{movie.genre}</p>
        {/* 注意：Google Drive链接需转换为缩略图格式才能直接显示图片 */}
        <img 
          src={movie.imageUrl.replace("/view?usp=sharing", "/thumbnail?usp=sharing")} 
          alt={movie.Name} 
        />
      </div>
    ))}
  </div>
);

方式二：根据ID查找单部电影

如果需要精准获取某一部电影的详情，可以写一个查找函数：

const getMovieById = (targetId) => {
  return moviesList.find(movie => movie.id === targetId);
};

// 示例：获取id为2的电影详情
const targetMovie = getMovieById(2);
console.log(targetMovie); // 输出对应电影的完整对象

额外提示 #

• 初始状态设为[]，可以避免数据加载完成前，调用数组方法（如map）时出现Cannot read properties of undefined的错误。
• Google Drive的默认图片链接是查看页，需要替换路径为缩略图路径才能在页面直接显示图片，示例中已做对应处理。

内容的提问来源于stack exchange，提问作者Priya Sharma