How to update hook state in a loop?

Question

I have a state and I am updating it in a loop. I have an issue where the state that was previously updated did not have enough time to update so I get undefined values.

Example:

const [errors, setErrors] = useState({})

On every second item I am changing the email prop but want to keep the password prop as is.

 for (let i = 0; i < res.length; i += 1) { if (i % 2) setErrors({ email: test${i}, password: errors.password }); else setErrors({ email: errors.email, password: test2${i} }); console.log('err', errors); }

The result ends up giving me

email:test1

and

password:undefined

Is it possible to update state like this or am I going on about it the wrong way?

Maybe this approach will work? reactjs.org/docs/hooks-reference.html#functional-updates — jmargolisvt
– jmargolisvt, Commented Oct 15, 2019 at 19:07
useState is async. It is not accessible after you set. You get your values at the next render. — Peter Ambruzs
– Peter Ambruzs, Commented Oct 15, 2019 at 19:09

Dupocas · Accepted Answer · 2019-10-15 19:09:04Z

Use the updater version of useState and spread all properties overwriting email

if (i % 2) setErrors(prevErros =>({ ...prevErros, email: test${i}})

tic · Accepted Answer · 2019-10-15 19:18:04Z

Can you set once at end? You shouldn't be calling the same setState function multiple times in one hook

let currentEmail = null; let currentPassword = null; for (let i = 0; i < res.length; i += 1) { if (i % 2) { currentEmail = `test_${i}`; } else { currentPassword = `test2_${i}`; } } setErrors({ email: currentEmail, password: currentPassword });

Collectives™ on Stack Overflow

How to update hook state in a loop?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related