0

I am trying to retrieve data from api and show it in my array but when i setting it up in my useState, it is not updating else it is updating after the 1st render means on the 2nd render and on the first render it is returning the previous state.

Here is my code:

const getMembers = async (id) => {
    const groupMembers = await getGroupMembers(id);
    setLoading(true);
    setMembersData(groupMembers);
    if(membersData){
      const result = usersList.filter(e => !membersData.some(a => a.userId === e.id));
      setRemainingUsers(result);
      console.log(result)
    } else {
      setUsersList(usersList)
    }
    setLoading(false);
  };
let options = remainingUsers.map(function(user){
    return { value: user.id, label: user.username}
  })

What i want is to get remaining users value on the first time function is called and it is updating after the first render. I tried using useEffect but it didn't help. I also search on the google regarding this but almost all solutions are to use useEffect. Here is how i use the useEffect hook.

useEffect(() => {console.log(groupId, group, remainingUsers)}, [ groupId, group, remainingUsers ]);
Ishaq Kamran
  • 173
  • 2
  • 13
  • This is how `useState` is supposed to work. Refer to this new docs that the react dev team is building [useState Caveats](https://beta-reactjs-org-d8yobrltj-fbopensource.vercel.app/apis/usestate#setstate-caveats) – Nikhil Devadiga Mar 07 '22 at 15:21
  • 1
    Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) – Nikhil Devadiga Mar 07 '22 at 15:23
  • @NikhilDevadiga already tried that one – Ishaq Kamran Mar 07 '22 at 16:20
  • Just after this line `setRemainingUsers(result);` are you expecting this to be true for the current render `remainingUsers === result // true` – Nikhil Devadiga Mar 07 '22 at 16:49
  • @NikhilDevadiga No, i want to only update the state – Ishaq Kamran Mar 07 '22 at 16:59
  • `remainingUsers` is the state you want to update right? – Nikhil Devadiga Mar 07 '22 at 17:09
  • Yes i want to update remainingUsers – Ishaq Kamran Mar 07 '22 at 19:42
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/242728/discussion-between-nikhil-devadiga-and-ishaq-kamran). – Nikhil Devadiga Mar 08 '22 at 14:33
  • I know for sure that the state can't be updated on the same render. It is very well possible that you won't need `remainingUsers` to update on the same render. You can refactor the component. It is really hard to refactor without knowing the whole component. Could you please add the code for the whole component?. – Nikhil Devadiga Mar 08 '22 at 14:41

1 Answers1

1

If(memebersData) {}

if(groupmembers){
const result = usersList.filter(e => !groupmembers.some(a => a.userId === e.id));
}```
MIAㅜ_ㅜ
  • 71
  • 1
  • 7
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 07 '22 at 18:06