Question

我的登录组件遇到麻烦，我使用了投币器模式，所以我有一个组件登录管理api调用，DumbLogin管理输入并警告用户关于我的服务器的响应。我使用Axios进行api调用，使用promises来做到这一点，我也使用箭头函数来避免这方面的麻烦，这就是我在想的...... 因为最后我有

TypeError：_this.setState不是函数

我尝试使用变量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

这是因为this内的匿名函数内的then不是React组件的this。

你需要为执行ajax调用的函数绑定正确的this（Reac Component's this）。

例如。如果函数是：

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

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

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

无论其！

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

在setState之后React Axios不呈现

1 个答案: