清除组件间隔的正确方法确实安装在 React 中答案

【问题标题】：Correct way to clear interval in component did mount in React清除组件间隔的正确方法确实安装在 React 中
【发布时间】：2021-11-14 06:49:33
【问题描述】：

当组件在基于类的组件中卸载时，我试图清除间隔。我对此进行了一些研究，发现在 componentWillUnmount 生命周期函数中，人们将实际函数存储在变量中，而不是直接清除间隔。例如：

      componentDidMount() {
        const { stock } = this.props;
// Fetch data once user lands on page
        this.fetchData(stock);
// Fetch data every hour
        setInterval(() => {
          this.fetchData(stock);
          console.log('setInterval ran');
        }, 3600000);
      }
   
    
      componentWillUnmount() {
        const { stock } = this.props;
// Remove interval
        const refreshFetch = clearInterval(this.fetchData(stock));
        console.log('setInterval cleared');
      }
    
      async fetchData(stock) {
        const data = await getAvgPriceHistory(stock);
        if (data && data[stock].length) {
          const dataArray = data[stock].map((arr) => {
            return arr[1];
          }).reverse();
          this.setState({
            data: dataArray,
            isLoaded: true
          });
        } else {
          // straight line if not found.
          this.setState({
            data: [1, 1],
            isLoaded: true
          });
        }
        console.log('Data fetched!');
      }

同时，我习惯于在 componentWillUnmount 函数中执行此操作而无需像这样定义变量：

      componentWillUnmount() {
        const { stock } = this.props;
// Remove interval
       clearInterval(this.fetchData(stock));
        console.log('setInterval cleared');
      }

做一个或另一个有什么好处吗？

【问题讨论】：

标签： javascript reactjs api fetch react-lifecycle

【解决方案1】：

setInterval 返回一个 id。你可以用clearInterval来销毁它。

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

let intervalId;

...

intervalId = setInterval(fn, time);

...

clearInterval(intervalId);

【讨论】：