React - setState does not update the value

Question

I am trying to update the state with a localStorage value in DidMount, but it is not updating:

type Props = {
};

type State = {
    id_evaluation: string,
};

class Evaluation extends Component < Props, State > {
    state = {
        id_evaluation: '',
    }

    componentDidMount() {
        const id_eval = getEvaluation();
        console.log('1 - ', id_eval)

        this.setState({
            id_evaluation: '1',
        });

        console.log('2 - ', this.state.id_evaluation)

In the first console.log I have the value 1, in the second it remains empty, it does not update the state.

score 3 · Answer 1 · answered Jan 20 '19 at 15:41

That is because you call console.log before the state has updated. Try this:

this.setState({
  id_evaluation: '1',
}, () => {
  console.log('2 - ', this.state.id_evaluation);
});

See this thread:

Can I execute a function after setState is finished updating?

Sahil Raj Thapa · Answer 2 · 2019-01-20T15:47:02.070

2

setState works asynchronously so pass console.log as callback to get updated state.

this.setState({ id_evaluation: '1'}, () => console.log('2- ', this.state.id_evaluation));

when used as your code, console.log('2 - ', this.state.id_evaluation) is printing previous state not the updated state.

edited Jan 20 '19 at 15:47

answered Jan 20 '19 at 15:41

Sahil Raj Thapa

2,353
3
12
23

score 1 · Accepted Answer · answered Jan 20 '19 at 15:43

1

this.setState is an async function.

 this.setState({
        id_evaluation: '1',
 }, () => console.log('2 - ', this.state.id_evaluation));

Callback function would solve your problem.

answered Jan 20 '19 at 15:43

prabin badyakar

1,636
2
16
24

React - setState does not update the value

3 Answers3