状态更新没有立即反映。如何使用 useEffect 的依赖数组来显示更改？

Posted 2023-03-17

【中文标题】状态更新没有立即反映。如何使用 useEffect 的依赖数组来显示更改？

【英文标题】：State Update is not reflecting immediately . How to use dependency array for useEffect to show changes?

【发布时间】：2022-01-05 06:48:46

【问题描述】：

状态更新不会立即反映，如何在状态更新时获取 useEffect 显示渲染功能的变化，我希望渲染显示加载页面时所做的更改，即在挂载时，即使数组已更新，它也不会反映。

const state = useContext(GlobalState)
const[jobs,setJobs]=state.categoriesAPI.jobs
const [user,setUser]=useState()
useEffect( ()=>

const  getmyUser=async ()=>

         const data:user= await http.get(MyApiUrl+'/api/users/job')
         setUser(user)
        
        
     
        const     populateJobs=async()=>
         try
         
           
         
             
               
               
               const myjobs=[...jobs];
               
               for(let i=0;i<myjobs.length;i++)
                 if(_.includes(user.saved,myjobs[i]._id))
                 
                   myjobs[i].liked=true; // I WANT THIS CHANGE TO REFLECT IN RENDER fn() .
                 
               
              setJobs(myjobs)
     
     
         
               
              catch(ex)
                  console.log('hey',ex)
               
         
             
             

               getmyUser()
               populateJobs();
  


       

 
 ,[])

even though the jobs array is  updated it doesnt reflect upon rendering ,
also if i use jobs in dependency array its getting into infinite loop ? how do I get to show it .

【参考方案1】：

这是一个突变问题。尽管您使用const myjobs=[...jobs]; 创建了一个新的作业数组，但您创建了一个浅拷贝。这意味着数组中的每个作业对象都与更新前保持相同的实例，因此myjobs[i] 对象实际上是相同的并且不会触发更新。

您应该创建该对象的新副本：

 myjobs[i] = ...myjobs[i], liked: true;

【讨论】：

还是同样的问题。

能否提供完整代码？ GlobalState的实现是什么，jobs在渲染中是如何使用的？

github.com/gamercodes/*** > 我复制了部分内容，请查收。