Question

以下是组件：

class ChartComp extends Component{
    constructor(props){
        super(props);
        this.timer = null;
        this.loadData = this.loadData.bind(this);
    }

    componentWillMount(){
        this.loadData();
    }

    componentWillUnmount(){
        if(this.timer){
            clearTimeout(this.timer);
        }
    }

    loadData(){
        //...
        getJSON(url, msg=>{ //get data from server
            if(msg.success){
                //...
                this.timer = setTimeout(()=>{this.loadData()}, 30000); //get data and rerender the component every 30s
            }
        })
    }

    render(){
        //...
    }
}

将在卸载组件之前调用clearTimeout函数。但是计时器处于异步功能，它在我收到服务器响应后再次启动。那么我怎样才能使clearTimeout工作呢？

Answer 1

在componentWillUnmount内的班级中设置一个标记。

在异步回调中，检查是否已设置该标志，如果是，则立即停止。

Answer 2

你当然可以根据@SLaks的建议设置一个标志。这与isMounted模式类似。 **注意我改为componentdidmount，这是一种更好的模式，我认为**

class ChartComp extends Component{
    constructor(props){
        super(props);
        this.timer = null;
        this.loadData = this.loadData.bind(this);
    }

    componentDidMount() {
      this._mounted = true;
      this.loadData();
    }

    componentWillUnmount(){
        this._mounted = false;
        if(this.timer){
            clearTimeout(this.timer);
        }
    }

    loadData(){
        //...
        getJSON(url, msg=>{ //get data from server
            if(msg.success && this._mounted){
                //...
                this.timer = setTimeout(()=>{this.loadData()}, 30000); //get data and rerender the component every 30s
            }
        })
    }

    render(){
        //...
    }
}

您可以详细了解该模式被弃用的原因here 然而，这样天真地最终需要getJSON以及随后的超时上的标志，因为基本上你需要将可取消的promises链接在一起（你想要阻止任何步骤）

要考虑的另一个范例是使用可观察的链。有关详细信息，请参阅此blog

如何在Reactjs组件中的componentWillUnmount时清除一个异步函数？

2 个答案: