Why this.state = wrong if this.setState won't work?

Question

I've read in many places that I shouldn't use this.state, but this.setState instead; the problem is that it won't work for my code. What am I doing wrong?

What I'm doing that works

    submitForm = () => {
        this.state.isAuthenticated = true
        this.setState({
            isAuthenticated: true,
            userName: this.state.userName,
        });
        this.props.onLogIn(this.state.isAuthenticated, this.state.userName);
        this.props.history.push("/predict");
    };

What doesn't work for some reason

    submitForm = () => {
        this.setState({
            isAuthenticated: true,
            userName: this.state.userName,
        });
        this.props.onLogIn(this.state.isAuthenticated, this.state.userName);
        this.props.history.push("/predict");
    };

`this.setState` is asynchronous, the changes are not available instantly but after some time. If you want to read the same data you have just set you need to use the second `this.setState` argument. https://reactjs.org/docs/react-component.html#setstate — zerkms, Jun 22 '20 at 03:28

score 1 · Answer 1 · answered Jun 22 '20 at 03:29

1

setState is asynchronous, so by the time you do this.props.onLogIn, the value in state has not updated yet. You need to do run those last couple lines in the callback of setState. See When to use React setState callback

answered Jun 22 '20 at 03:29

Zevgon

556
4
13

score 1 · Answer 2 · answered Jun 22 '20 at 03:30

1

setState is asynchronous, so when you do this.props.onLogIn, the value in state has not updated without one render .check in your second argument of setState like this.

submitForm = () => {
    this.setState({
        isAuthenticated: true,
        userName: this.state.userName,
    }, () => {
        this.props.onLogIn(this.state.isAuthenticated, this.state.userName);
        this.props.history.push("/predict");
    });
};

answered Jun 22 '20 at 03:30

Arpit Vyas

2,118
1
7
18

If this does ans to your que than please consider this as marked . – Arpit Vyas Jun 23 '20 at 17:26

score 1 · Answer 3 · answered Jun 22 '20 at 03:30

use the setState callback


   submitForm = () => {
        this.setState((state) => ({
            isAuthenticated: true,
            userName: state.userName,
        }), () => {
            this.props.onLogIn(this.state.isAuthenticated, this.state.userName);
            this.props.history.push("/predict");
        });
    };

score 1 · Answer 4 · answered Jun 22 '20 at 05:26

The other answers explain how this.setState is asynchronous. To address your question on why this.state doesn't work: this.state is only accessing the value of the state. You cannot set the state like you would set another variable. You need to use this.setState.

Also an alternate solution would be to simplify your code since isAuthenticated is known to be true:

submitForm = () => {
    this.setState({
        isAuthenticated: true,
    });
    this.props.onLogIn(true, this.state.userName);
    this.props.history.push("/predict");
};

Why this.state = wrong if this.setState won't work?

4 Answers4