React setstate not updating object array

Question

I am trying to update an object array but even though the correct values are passed to the function, the array remains blank. If I try add a second object, then somehow the first one gets added and I'm not sure what I'm doing wrong.

 const [qualifications, setQualifications] = useState([{}]);

  function handleAddQualification(values: any) {
    console.log(values);

    console.log(qualifications);

    setQualifications((prev) => {
      return [...prev, values];
    });

    console.log(qualifications);
  }

The values that I'm passing get logged correctly and the 2 subsequent logs of qualifications both show an empty array of objects.

I simplified the object so in my screen shot I added 'one' and the value logs correctly, but the qualifications array remains blank. If I add a second entry of 'two' then for some reason it adds 'one' to the array.

Please share some insight as to what is going on here?

setState won't update immediately. what is the use case here? can you include some more code? — Sarun UK
– Sarun UK, Commented Jul 8, 2021 at 11:40
CAn you mention the final expected state here? Also, as Sarun mentioned, immediately logging after state change will not print correct values — Shivam Jha
– Shivam Jha, Commented Jul 8, 2021 at 11:43

Gilevich Petr · Accepted Answer · 2021-07-08 11:51:56Z

1

Here is example how event loop works :)

In your case:

Calling handleAddQualification
Log values, qualifications
Adding setQualifications to queue as async operation
Log qualifications again with the same result as from step 3
Here can works tasks from queue which was added before setQualifications
setQualifications updates qualifications

Take a look here for better understanding https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

answered Jul 8, 2021 at 11:51

Gilevich Petr

613 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sathya reddy · Accepted Answer · 2021-07-08 12:23:37Z

0

The state update calls are asynchronous and you can't see them by logging just after update call.

The first object is empty because you have defined it in your default state and you update your new state using the previous state because of this the empty object always stays as first element in the array. To fix this set your qualifications to

interface Qual {
  subject?: string;
  level?: string;
  other?: string
}

const [qualifications, setQualifications] = useState<Qual[]>([]);

if you want to log state whenever it updates use an effect hook, something like this

useEffect(() => { 
    console.log({qualifications});
}, [qualifications])

edited Jul 8, 2021 at 12:23

answered Jul 8, 2021 at 11:46

sathya reddy

7773 silver badges11 bronze badges

3 Comments

Jason Davidson Over a year ago

If I initialize the array as empty, then I get a typescript error 'Argument of type '(prev: never[]) => any[]' is not assignable to parameter of type 'SetStateAction<never[]>'. Type '(prev: never[]) => any[]' is not assignable to type '(prevState: never[]) => never[]'. Type 'any[]' is not assignable to type 'never[]'.'

Jason Davidson Over a year ago

This fixed it! Thanks again for your help. const [qualifications, setQualifications] = useState<object[]>([]);

sathya reddy Over a year ago

I have updated the code to suit your use case but you can change the interface as you like

Collectives™ on Stack Overflow

React setstate not updating object array

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related