setState doesnt seem to update the state

Question

onSelectedRow(user, clickEvent){
     const state = this.state;
    this.state['userId'] = clickEvent.target.getAttribute(user['mta:UserId']);
    this.setState(state);
    console.log(user['mta:UserId']);
    console.log(this.state);
}

Okay, so when I click a table-cell in my app this function gets called.

The point of it is to take the users UserId and set the state. This UserId is later on passed down to a child component and used to get specific information. The problem is that I get the correct data in the first console.log but when I then log this.

state the userId is still null for some reason. Anyone had similiar problems?

setState is an async operation, it doesn't immediately update the state of your component — Icepickle, Nov 02 '17 at 08:26
Have you considered [*reading the documentation*](https://reactjs.org/docs/react-component.html#setstate) ? *"`setState()` does not always immediately update the component. It may batch or defer the update until later. This makes reading `this.state` right after calling `setState()` a potential pitfall."* — Felix Kling, Nov 02 '17 at 08:30
You should not be mutating the state like above: `const state = this.state; this.state['userId'] = clickEvent.target.getAttribute(user['mta:UserId']);` Read here: https://reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data — Naisheel Verdhan, Nov 02 '17 at 08:32

Michał Kostrzyński · Accepted Answer · 2017-12-19T14:49:34.840

1

It's most probably because you're not updating the const state, but instead trying to mutate the state itself. Also, you don't have to make a copy of a state. You can update just the field you want to update like this:

onSelectedRow(user, clickEvent) {
    this.setState({
        userId: clickEvent.target.getAttribute(user['mta:UserId'])
    }, () => { console.log(this.state.userId) });
    console.log(user['mta:UserId']);
}

Also, your console.log won't read immediate change in the state as setState is an async action.

If you really want to read it you can pass the callback to the setState which fill fire right after the state is updated, or use React's lifecycle method componentDidUpdate().

edited Dec 19 '17 at 14:49

answered Nov 02 '17 at 08:28

Michał Kostrzyński

364
1
10

Why the downvotes? That's the correct answer. – Michał Kostrzyński Nov 02 '17 at 08:34
That's what I've written in the answer, so I don't really get what's the problem here. I know React, I pretty much use it everyday. – Michał Kostrzyński Nov 02 '17 at 08:36
Alright, that's more of an answer. I just wanted to correct novafluff's code to make it work, not to make a point about the console.log. I'll update it though. – Michał Kostrzyński Nov 02 '17 at 08:41
@Icepickle, I've updated an answer so it's more informative. – Michał Kostrzyński Nov 02 '17 at 08:46
Yeah it is, but I would remove the first paragraph after the code, the added one is quite clear :) – Icepickle Nov 02 '17 at 08:48

setState doesnt seem to update the state

1 Answers1