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的回调中运行最后几行。参见When to use React setState callback

Answer 2

setState是异步的，所以当您执行this.props.onLogIn时，如果没有一个render，状态值就不会更新。像这样检查setState的第二个参数。

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

Answer 3

使用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 4

其他答案说明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");
};

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

4 个答案: