React中无法展示TMDB API数据：解决map函数报错问题

问题根源 #

1. 数据结构错误：TMDB热门电影接口返回的是包含page、results等字段的对象，你直接将整个对象赋值给了movie状态。而map是数组专属方法，对象无法调用该方法，因此触发报错。
2. useEffect无限触发：你的useEffect未设置依赖数组，会导致组件每次渲染都重复发起API请求，既浪费资源，也可能引发不必要的状态更新。

修正后的代码 #

import "./App.css";
import MemsData from "./Components/MemsData";
import NewMemsData from "./Components/NewMemsData";
import FilterElement from "./Components/FilterElement";
import MovieBox from "./Components/MovieBox";
import { useEffect, useState } from "react";
import Axios from "axios";

function App() {
  const API_URL =
    "https://api.themoviedb.org/3/movie/popular?api_key=8f11538792fbc26efa63aa919f0844b8";

  const [movies, setMovies] = useState([]);

  useEffect(() => {
    Axios.get(API_URL)
      .then((res) => {
        // 电影列表数据嵌套在res.data.results中，这是可遍历的数组
        setMovies(res.data.results);
      })
      .catch((err) => {
        console.error("请求电影数据失败:", err);
      });
  }, []); // 空依赖数组确保请求仅在组件挂载时执行一次

  return (
    <div className="App">
      <h2>Movie Api</h2>
      {movies.map((movie, index) => (
        <div key={index}>{movie.title}</div>
      ))}
    </div>
  );
}

export default App;

关键修改说明 #

• 正确提取电影数组：将setMovie(res.data)改为setMovies(res.data.results)，直接获取接口返回中的电影列表数组，确保能调用map方法。
• 限制请求执行时机：给useEffect添加空依赖数组[]，让API请求仅在组件首次挂载时执行一次，避免重复请求。
• 语义化变量命名：将状态变量movie改为movies，贴合数组语义，避免歧义。
• 增加错误捕获：添加catch块捕获请求异常，方便排查网络或接口问题。

内容的提问来源于stack exchange，提问作者Ashish Nirvikar