useState 没有设置任何内容，如果我将该值添加到依赖项列表中，我的组件将触发无限重新渲染循环

将该值添加到依赖项列表中，我的组件将触发无限重新渲染循环"/>

useState 没有设置任何内容，如果我将该值添加到依赖项列表中，我的组件将触发无限重新渲染循环

我想设置一个从 Nodejs 获得的电影数组，该部分工作正常，因为响应正常，但是当我使用 useState 在我的组件中设置数组时，它好像没有触发重新渲染。对不起，如果我的英语不完美，我来自阿根廷，但我找不到任何对我的语言有帮助的文章。

收藏夹组件显示登录用户的收藏夹电影

import React, { useEffect, useState } from "react";
import axios from "axios";
import Modal from "../Modal";

const Favorites = ({user, favMovies}) =>{
    const [myList,setMyList] = useState(favMovies);
    const [favsList,setFavsList] = useState([]);

    const getData = async() =>{
        const response = await axios.post('/api/favs',{favMovies:myList});
        const data = response.data.favsList;
        console.log(data);
        setFavsList(data);
    }

    useEffect(()=>{
        setMyList(favMovies);
        if(myList){
            getData();
        }
    },[])

}

export default Favorites;

App 组件有路由器，如您所见，将 favMovies 作为 prop 发送到 Favorites 组件，这个名为 favMovies 的数组是一个 Id 数组，我通过它逐一获取用户的电影

function App() {
  const [user,setUser] = useState({});
  const [favsList,setFavsList] = useState([]);

  useEffect(()=>{
    const loggedinUser = localStorage.getItem('user');
    if(loggedinUser){
      setUser(JSON.parse(loggedinUser));
      console.log(user);
    }
  },[])

  return (
    <Router>
      <Navbar {...user} setUser={setUser}/>
      <Routes>
        <Route exact path='/' element={<ListMovies url={'/api'}/>} />
        <Route path='/popular' element={<ListMovies url={'/api/popular'} />} /> 
        <Route path='/movie/:id' element={<InfoMovie {...user}/>} />
        <Route path='/contact' element={<Modal msg='Acirca de nos'/>} />
        <Route path='/login' element={<Login setUser={setUser}/>} />
        <Route path='/register' element={<Register/>}/>
        <Route path='/favs' element={<Favorites user={user} favMovies={user.favMovies}/>}/>
        <Route path='*' element={<Modal msg='No hubo coincidencias de ruta'/>} />
      </Routes>
    </Router>
  );
}

export default App;   

如果有人可以帮助我或者已经解决了这个问题，我将非常感激

可能的解决方案：

1.将 favMovies 作为 props 传递给 Favorites 组件而不是将其存储为组件的状态更合适。当组件的 props 改变时，React 会自动重新渲染组件。因此，可以去掉myList状态，直接在getData函数中使用favMovies

2.在useEffect hook中，添加favMovies作为依赖。这样，只要 favMovies 道具发生变化，效果就会运行。

3.在 App 组件中，确保正确设置用户状态并将 user.favMovies 作为 favMovies 属性传递给 Favorites 组件：

 const Favorites = ({ user, favMovies }) => {
      const [favsList, setFavsList] = useState([]);
    
      const getData = async () => {
        const response = await axios.post("/api/favs", { favMovies: favMovies });
        const data = response.data.favsList;
        console.log(data);
        setFavsList(data);
      };
    
      useEffect(() => {
        if (favMovies) {
          getData();
        }
      }, [favMovies]);
    
    
    export default Favorites;