ReactJs:不等待，Axios就会导致组件化()

Question

我想在componentDidMount()中的axios成功之后在我的状态中设置字符串，并在这个页面上使用这个状态，但是当我调用axios时，流不是等待axios成功，而是获得了空白状态。

请查找以下代码：

componentWillMount() {

    axios.get(config.Rype_services_url + "Backtest/Subscription/" + this.props.authUser.uid)
            .then(function (response) {
                debugger
                if (response.data == "NotAllow") {
                    errMsg= "Max BackTest Count."
                }
                else {
                    errMsg= ""
                }

                this.setState({
                    CheckSubscription:errMsg;
                })

            }).catch(function (e) {
        });
}

 '<div className="errorMessage" style={{ position: 'fixed', height: '0%', top: '50%', left: '30%', width: '62%', zIndex:'10' }}>{this.state.Error != "" ? <p style={{ background: '#ff0000', color: '#fff', padding: '15px 0px', }}>{this.state.Error}</p>: ""}</div>'

现在我最关心的是

我的服务正确地调用并得到适当的输出，但是componentDidMount()并不是等待axios输出，而且总是在我的状态中找到空白值。

我想同步axios，等待输出，然后componentDidMount()函数应该结束。

Answer 1

您的上下文似乎没有绑定到回调函数，因为您没有使用箭头函数/绑定。

不绑定您的上下文将导致this.setState未定义。可以使用箭头函数在以下代码中解决这一问题：

componentWillMount() {
    axios.get(config.Rype_services_url + "Backtest/Subscription/" + this.props.authUser.uid)
        .then(response => {
            debugger
            this.setState({
                CheckSubscription: response.data == "NotAllow" ? "Max BackTest Count." : "" //Shorter syntax of your previous code
            })

        }).catch(e => {});
}

请记住，您不应该尝试使生命周期函数是异步的，因为它可能会从反应中产生不可预测的行为。