reactJS如何停止监听Ajax请求

Question

我在componentdidmount中有一个ajax调用。然后在ajax promise中设置setState。

代码是这样的

componentDidMount(){
    axios.post('mydomian.com/item/',this.state)
    .then(function (response) {
        const res = response.data
        if (res.status === 'OK') {
            this.setState({items :res.list})
        }else{
            console.log('can not load data', response)
        }
    }.bind(this))
}
componentWillUnmount(){
    how to stop everything about axios?
}

当我导航到其他路线时，这会导致错误“无法在未安装的组件上设置状态”。

所以我认为我应该做的是在componentwillunmount中删除axios监听器。你会怎么做？

Answer 1

一个非常简单的解决方案是在unmount上设置一个标志，并在promise分辨率内使用它，如下所示：

componentDidMount(){
    axios.post('mydomian.com/item/',this.state)
    .then(function (response) {
        if (this.unmounted) return;
        const res = response.data
        if (res.status === 'OK') {
            this.setState({items :res.list})
        }else{
            console.log('can not load data', response)
        }
    }.bind(this))
}
componentWillUnmount(){
    this.unmounted = true;
}