React Typescript: can't set State

Question

I have an array that contains a string. I'm trying to take that string and join it with another string. When I console.log('Dates: ' + mergedActions) I get back both strings together. However when I console.log('Dates: ' + this.state.MergedAllActions) it's empty. I tried adding a timeout to the console log but still nothing.

Any idea why mergedActions even though it contains information doesn't get set in MergedAllActions?

let currentAction = 'Form has been submitted';
let mergedActions = this.state.Product[0].AllActions + ',' + currentAction;
this.setState({ MergedAllActions: mergedActions });
console.log('Dates: ' + mergedActions);  
console.log('Dates: ' + this.state.MergedAllActions);

Console below:

Dates: first Step,First Approver accepted
Dates:

nip · Accepted Answer · 2020-07-29 19:09:13Z

1

setState is asynchronous, but it supports a callback as the 2nd argument. Change to

this.setState({ MergedAllActions: mergedActions }, console.log(this.state.MergedAllActions));

answered Jul 29, 2020 at 19:09

nip

1,7071 gold badge12 silver badges21 bronze badges

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

Comments

AKX · Accepted Answer · 2020-07-29 19:09:19Z

1

setState is asynchronous, as the documentation explains:

setState() enqueues changes to the component state [...]
Think of setState() as a request rather than an immediate command to update the component. [...]
setState() does not always immediately update the component. [...] This makes reading this.state right after calling setState() a potential pitfall.
Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied.

(Emphasis mine.)

answered Jul 29, 2020 at 19:09

AKX

171k16 gold badges147 silver badges229 bronze badges

2 Comments

hisusu32 Over a year ago

Hi thanks for the reply, I'm still new to react. So I'm doing this in a submit function. On submit I'm doing this calculations then pushing the new set state to my array any ideas?

AKX Over a year ago

As the doc fragment above explains, the change to your state is not immediately available after you call setState(), since setState() is asynchronous. It will be reflected in state when the component is re-rendered the next time.

Collectives™ on Stack Overflow

React Typescript: can't set State

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related