React useEffect 停止无限循环

Question

这段代码造成了一个无限循环，我需要想办法解决它。

我想用 moviesData 值填充状态电影信息，以便能够将其映射到每部电影的显示卡。

首先，我尝试在推送功能之后设置Movieinfos，但它不起作用。 所以我觉得把它放到一个独立的useEffect中会更好。

这似乎不是正确的方法^^。

function App() {

  const [movieid, setMovieid] = useState([]);
  const [movieinfos, setMovieinfos] = useState([]);
  let moviesData = [] 

useEffect(() => {
  axios.get('http://localhost:5000')
  .then(function (response) {
    // handle success
    console.log(response.data.movies)
   
      setMovieid(response.data.movies)
  })

  .catch(function (error) {
    // handle error
    console.log(error);
  })
     
  
}, []);

console.log(movieid)

useEffect(() => {
for (const movie of movieid) {
console.log(movie.movieid)
 axios.get(`${BASE_URL}${movie.movieid}?api_key=${API_KEY}&language=fr`) 

  .then(function (response) {
    // handle success
    
    
    moviesData.push(
    {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}
      );
              
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })

  }

}, [movieid]);

useEffect(() => {

setMovieinfos (moviesData)
 
}, [moviesData]);

  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;

Answer 1

正如 Yohsi 所指出的，无限循环是由 useEffect 引起的，这取决于每次重新渲染时的新数组。

不过，我的建议是，您应该尽量让组件保持尽可能少的状态。

如果您不需要在任何地方显示movieid，请不要将其设置为稍后由 useEffect 处理的状态，这只会让人难以理解。

看起来你的整个组件只需要moviesInfo 状态，你可以在一个useEffect中处理它：

const [movieinfos, setMovieinfos] = useState([]);

useEffect(() => {
  axios
    .get("http://localhost:5000")
    .then(function (response) {
      const movies = response.data.movies;
      return Promise.all(
        movies.map((movie) =>
          axios.get(
            `${BASE_URL}${movie.movieId}?api_key=${API_KEY}&language=fr`
          )
        )
      );
    })
    .then((responses) => {
      setMovieinfos(
        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,
        }))
      );
    });
}, []);

我建议在使用 react 时避免使用许多 useEffect 钩子，特别是避免使用它们来编排相互依赖的副作用。