React useEffect 无限循环问题修复求助：如何正确填充movieinfos状态以渲染电影卡片

看起来你遇到了两个核心问题：无限循环和异步请求完成前就更新状态导致数据不全。让我一步步帮你解决：

问题根源分析 #

1. 无限循环的原因：
   你在组件里声明了let moviesData = []，这意味着组件每次重新渲染时，这个变量都会被重新创建一个新的引用。而你最后那个useEffect的依赖是moviesData，每次渲染它都变，所以这个useEffect会反复触发，调用setMovieinfos，进而导致组件重新渲染，形成无限循环。

2. 数据填充不生效的问题：
   多个axios.get请求是异步的，你直接在循环里push到moviesData，然后依赖moviesData更新状态，但此时可能很多请求还没返回结果，moviesData里并没有完整的数据。

修复后的完整代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [movieid, setMovieid] = useState([]);
  const [movieinfos, setMovieinfos] = useState([]);

  // 第一步：获取电影ID列表
  useEffect(() => {
    axios.get('http://localhost:5000')
      .then(response => {
        console.log(response.data.movies);
        setMovieid(response.data.movies);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  // 第二步：根据ID获取电影详情，处理异步请求
  useEffect(() => {
    // 如果movieid为空，直接返回，避免不必要的请求
    if (movieid.length === 0) return;

    // 用Promise.all处理所有异步请求，确保全部完成后再更新状态
    const fetchMovieDetails = async () => {
      try {
        const requests = movieid.map(movie => 
          axios.get(`${BASE_URL}${movie.movieid}?api_key=${API_KEY}&language=fr`)
        );
        const responses = await Promise.all(requests);
        
        // 整理返回的数据
        const moviesData = responses.map(response => ({
          Genres: response.data.genres,
          Overview: response.data.overview,
          Poster: response.data.poster_path,
          Company: response.data.production_companies,
          Release: response.data.release_date,
          Title: response.data.title
        }));
        
        // 一次性更新状态
        setMovieinfos(moviesData);
      } catch (error) {
        console.log(error);
      }
    };

    fetchMovieDetails();

    // 清理函数：组件卸载时取消请求，防止内存泄漏
    return () => {
      // 使用axios的取消令牌取消未完成的请求
      const CancelToken = axios.CancelToken;
      const source = CancelToken.source();
      source.cancel('组件已卸载，取消请求');
    };
  }, [movieid]); // 只依赖movieid，当movieid变化时才执行

  return (
    <div className="App">
      <div className="Header">
        <Logo />
      </div>
      <div className="Menu">
        <Search />
        <Add_movie_button />
        <Delete_movie_button />
        <Random_movie_button />
      </div>
      <div className="Movies">
        {movieinfos.map((movie) => <Movie_card key={movie.Title} data={movie}/>)}
      </div>
    </div>
  );
}
export default App;

关键修复点说明 #

• 移除了全局的moviesData变量：不再用普通变量存临时数据，而是在异步请求完成后直接整理数据并更新状态，避免了因变量引用变化导致的无限循环。
• 使用Promise.all处理异步请求：确保所有电影详情请求都完成后，再一次性把完整的数据设置到movieinfos状态中，保证渲染的数据是完整的。
• 添加了空数组判断：当movieid为空时不执行请求，避免无效操作。
• 添加了清理函数：防止组件卸载后还在执行异步请求，造成内存泄漏。
• 简化了状态更新逻辑：不再需要多个useEffect，只需要在movieid变化时执行一次请求逻辑，直接更新movieinfos。

这样修改后，既解决了无限循环的问题，也能正确把所有电影数据填充到状态里，供map渲染使用。

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