ComponentDidMount代码即使在组件卸载后仍执行

Question

在ComponentDidMount（）内部，我们定期调用api以获取数据。 但是，即使在卸载组件后，仍然会调用api。

async componentDidMount() {
    let { getItemHistoryData } = this.props;

    for (let i = 0; i < 25 && !this.props.is_synched; i++) {
        await wait(5000);
        getItemHistoryData();
    }
}


const wait = (ms) => {
    return new Promise(resolve => setTimeout(resolve, ms));
}

但是，即使用户移动到另一个页面，也会调用getItemHistoryData（）操作。

Answer 1

我认为您需要重构代码...

您需要跟踪setTimeout才能在componentWillUnmount()上停止它

let t;
async componentDidMount() {
  let { getItemHistoryData } = this.props;

  t = setTimeout(getItemHistoryData(), 5000);
}


componentWillUnmount() {
  clearTimeout(t);
  t = null;
}

getItemHistoryData() {

   // Do the function's stuff here

   if(!this.props.is_synched){
      t = setTimeout(getItemHistoryData(), 5000);
   }

}

在getItemHistoryData()的末尾执行有关i < 25 && !this.props.is_synched ，然后再次调用-或不调用setTimeout

Answer 2

componentDidMount运行并完成。 但是它有一个Promise，当实现时，它将在Promise内部调用回调。 这是由javascript引擎完成的。 它与反应无关。

编辑：看起来for循环确实得到了完全执行，但是在await阻塞了。 因此，它创建了一个承诺链，而不是一次创建25个承诺。 需要做更多的研究。 我虽然只有for-of循环能做到这一点。 很抱歉提供错误信息。

这是您的代码在通过Babel JS转换为es5 转换后的代码时的样子

Answer 3

我给您更多我喜欢使用的选择

保存状态：

 intervalId: null,
 intervalCounter: 0

和componentDidMount添加：

const intervalId = setInterval(this.timer, 5000, 25)

创建一个新的功能timer ：

timer = async () => {
    if(this.state.intervalCounter <= 25){
        getItemHistoryData();
        this.setState({intervalCounter: this.state.intervalCounter + 1})
    } else {
        clearInterval(this.state.intervalId); //clear
    }
}

并且不要忘记清除用户离开屏幕时的间隔：

  componentWillUnmount() {
       clearInterval(this.state.intervalId);
   }

Answer 4

从上面的代码中我了解到，即使卸载了组件，循环也一直运行到完成。 为了解决这种特殊情况而无需在代码中进行重大更改，您可以使用布尔值来跟踪组件的卸载，并在循环条件中使用它来确保循环在卸载之后的迭代中退出。 请注意，卸载组件后，此操作仍将执行挂起的任务。

async componentDidMount() {
    let { getItemHistoryData } = this.props;

    for (let i = 0; i < 25 && !this.props.is_synched && !this.isUnmounted; i++) {
        await wait(5000);
        getItemHistoryData();
    }
}

async componentWillUnmount(){    
    this.isUnmounted = true;
}

如果要防止任何进一步的迭代，可以将代码重构为使用setInterval ，然后使用clearInterval进行清理。 对于大多数实际情况，我上面建议的方法应该足够，并且可以防止重构代码。