React useEffect 停止无限循环

Question

这段代码形成了一个无限循环，我需要找到一种方法来修复它。

我想用 moviesData 值填充 state 电影信息，以便能够在其上显示 map 以显示每部电影的卡片。

首先，我尝试在推送 function 之后设置电影信息，但没有成功。 所以我认为将它放入一个独立的 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 引起的，该 useEffect 取决于每次重新渲染时的新数组。

不过，我的建议是，您应该尽量让您的组件至少包含 state。

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

看起来你的整个组件只需要moviesInfo state，你可以在一个 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钩子，特别是避免使用它们来编排相互依赖的副作用。