Почему выводится старое значение state?

Question

[yankoyski]

Почему console.log выводит старое значение из state, если перед этим сработал setState?

import React, {Component} from "react";

export default class Test extends Component{

    constructor(props) {

        super(props);

        this.state = {
            test: false
        }
    }

    componentWillMount() {

        this.setState({
            test: !this.state.test
        });

        console.log(this.state.test)//false
    }


    render() {

        return (
            <div />
        )
    }
}

Answer 1

[Алексей Уколов]

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

Документация

Вот так правильно:

this.setState(
  (state) => ({test: !state.test}),
  () => console.log(this.state.test)
);

Answer 2

[Антон Спирин]

this.setState(
  prevState => ({ test: !prevState.test }),
  () => console.log(this.state.test),
);