React Axios 在 setState 之后不渲染

Question

我的登录组件有问题，我使用的是 cointainer 模式，所以我有一个管理 api 调用的登录组件和一个管理输入并警告用户的 DumbLogin关于我的服务器的响应。我正在使用 Axios 进行 api 调用，它使用 promises 来做到这一点，我还使用箭头函数来避免与此相关的麻烦，这就是我的想法...... 因为最后我有

TypeError: _this.setState is not a function

我尝试使用变量 self 来解决这个问题，但结果是同样的错误。

我该怎么办？

axios(all)
        .then((response) => {
        console.log(response);
            if (response.status === 200){
                this.setState({
                    ...this.state,
                    spin: false,
                });
                let data = response.data;
                this.props.connect(data.username, data.email, data.token, data.partners);
                this.props.router.push('panel');
            }
        }).catch((error) => {
            console.log(error.response);
            this.setState({
                spin: false,
                errorLogin: 'Username or password wrong',
            });
        });

（spin 是一个布尔值，用于通知 DumbLogin 在等待我的服务器响应时是否应该显示微调器）

Answer 1

因为then里面的匿名函数里面的this不是React组件的this

您需要为执行 ajax 调用的函数绑定正确的 this（Reac 组件的 this）。

例如。如果函数是：

fetchData(){
    axios(all).then(...).catch(...)
}

你可以在构造函数中绑定它：

constructor(){
   this.fetchData = this.fetchData.bind(this)
}

然而！

这不是推荐的解决方案，您通常不想 ajax 在组件中调用...为此您可能需要 redux、mobx 甚至 redux-saga

React Axios 在 setState 之后不渲染

React Axios not rendering after setState

promise

setstate

reactjs

arrow-functions

axios