React调用The MovieDB API获取指定电影类型列表失败求助

问题分析及修复步骤： #

1. API调用错误：getMovieGenres 中误用 require（模块导入语法）发起HTTP请求，需替换为实际的请求方法（如axios.get/fetch）。
2. 未提取目标数组：API返回完整电影对象，需从中提取genres字段而非直接赋值整个对象。
3. map函数无返回值：箭头函数使用大括号但未显式返回<p>元素，导致渲染无内容。
4. 冗余请求：无需单独调用getMovieGenres，可直接从loadDataMovie获取的电影数据中提取类型列表。

修正后的代码： #

1. 修复API调用函数

// 假设使用axios作为HTTP客户端，需确保已安装并导入
import axios from 'axios';

getMovieGenres: async (id: string) => {
  const response = await axios.get(`/movie/${id}?api_key=${key}&language=pt-BR`);
  return response.data;
},

2. 简化组件逻辑

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { api } from "../../api";
import { MovieDataType, GenresType } from "../../types/MovieDataType";
import style from "./style.module.css";

export const Movie = () => {
  const [movie, setMovie] = useState<MovieDataType>();
  const [genresList, setGenresList] = useState<GenresType[]>([]);
  const params = useParams();

  const loadDataMovie = async (id: string) => {
    const movieData = await api.getMovie(id);
    setMovie(movieData);
    // 直接从电影数据中提取类型列表
    if (movieData.genres) {
      setGenresList(movieData.genres);
    }
  };

  useEffect(() => {
    if (params.id) {
      loadDataMovie(params.id);
    }
  }, [params.id]); // 添加依赖，确保路由参数变化时重新加载

  const imgPath = "https://image.tmdb.org/t/p/w1280/";
  const imgPoster = "https://image.tmdb.org/t/p/w500/";

  return (
    <>
      <div className={style.headerMovie}>
        {movie && (
          <>
            <div
              style={{
                backgroundImage: `url('${imgPath}/${movie.backdrop_path}')`,
              }}
              className={style.bg}
            ></div>

            <div className={style.content}>
              <img 
                src={`${imgPoster}/${movie.poster_path}`} 
                alt={movie.title || "电影海报"} 
              />
            </div>
          </>
        )}

        <div>
          {genresList.map((item) => (
            <p key={item.id}>{item.name}</p>
          ))}
        </div>
      </div>
    </>
  );
};

额外优化说明： #

• 为列表项添加key属性，符合React渲染规范并避免警告。
• 对movie进行空值检查，防止未加载完成时访问属性报错。
• 修复嵌套<p>标签的无效HTML结构，替换为<div>容器。
• 添加图片alt文本，提升页面可访问性。
• 将params.id加入useEffect依赖数组，确保路由参数变化时自动重新获取数据。

内容的提问来源于stack exchange，提问作者Thesco Ferreira