如果 this.setState 不起作用，为什么 this.state = wrong？

Question

我在很多地方读过我不应该使用this.state，而是使用this.setState；问题是它不适用于我的代码。我究竟做错了什么？

我在做什么

    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");

    };

由于某种原因什么不起作用

    submitForm = () => {

        this.setState({

            isAuthenticated: true,

            userName: this.state.userName,

        });

        this.props.onLogIn(this.state.isAuthenticated, this.state.userName);

        this.props.history.push("/predict");

    };

Answer 1

setState是异步的，所以当你这样做的时候this.props.onLogIn，状态中的值还没有更新。您需要在 setState 的回调中运行最后几行。查看何时使用 React setState 回调

Answer 2

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

Answer 3

其他答案解释了 this.setState 是如何异步的。要解决您关于 this.state 为何不起作用的问题： this.state 仅访问状态的值。您不能像设置另一个变量那样设置状态。您需要使用 this.setState。另外一个替代解决方案是简化您的代码，因为已知isAuthenticated是true：submitForm = () => {    this.setState({        isAuthenticated: true,    });    this.props.onLogIn(true, this.state.userName);    this.props.history.push("/predict");};

Answer 4

setState 是异步的，因此当您执行 this.props.onLogIn 时，如果没有一次渲染，状态中的值不会更新。像这样检查 setState 的第二个参数。submitForm = () => {    this.setState({        isAuthenticated: true,        userName: this.state.userName,    }, () => {        this.props.onLogIn(this.state.isAuthenticated, this.state.userName);        this.props.history.push("/predict");    });};