clearInterval 在 componentWillUnmount 中不起作用

Posted 2023-04-14

【中文标题】clearInterval 在 componentWillUnmount 中不起作用

【英文标题】：clearInterval not working in componentWillUnmount

【发布时间】：2019-05-01 04:24:11

【问题描述】：

我的反应应用程序在 componentDidMount 中获取 api 和 setInterval 并在 componentWillUnmount 中将其删除，但不知何故，即使组件不再挂载（例如，当用户注销并重定向到登录页面时）它仍然会定期执行 fetch api，如何调试它？

(1) 获取api代码

fetchApi = async pathname => 
const URL = 'API URL'
try 
  const  data  = await axios.get(URL,  withCredentials: true );
  const  updateTime, results  = data;
  const sortedResults = _.sortBy(results, "wo_start").reverse();

  // fetching user data from sessionStorage
  const user = JSON.parse(sessionStorage.getItem("user"));
  if (!user) 
    return this.setState(
      redirectToLogin: true
    );
  
  return this.setState(
    orders: sortedResults,
    renderedOrders: sortedResults,
    updateTime: updateTime.time,
    pathname,
    user
  );
 catch (e) 
  console.error("Credentials Failed");
  return this.setState(
    redirectToLogin: true
  );
;

(2) 组件DidMount

componentDidMount() 
const  pathname  = this.props.history.location;
this.fetchApi(pathname)
  .then(() => 
    const intervalId = setInterval(
      () => this.fetchApi(pathname),
      2 * 60 * 1000
    );
    this.setState(
      intervalId: intervalId
    )
  )
  .catch(e => console.error(e));
  

(3) 组件WillUnmount

 componentWillUnmount() 
// clearing set interval
clearInterval(this.state.intervalId);
;

(4) 这是注销后来自 chrome 控制台的图像

【问题讨论】：

我会从console.log围绕componentWillUnmount开始，该块是否按预期运行？

是的，也许componentWillUnmount 甚至没有运行。尝试记录或设置断点，this.state.intervalId 的值也

【参考方案1】：

setState() 是异步的。

更改您的代码：

(2) 组件DidMount

 ...
 ...
  this.fetchApi(pathname)
  .then(() => 
    const intervalId = setInterval(
    () => this.fetchApi(pathname),
    2 * 60 * 1000
  );
  this.intervalId= intervalId
...
...

(3) 组件WillUnmount

componentWillUnmount() 
  // clearing set interval
  clearInterval(this.intervalId);
;

【讨论】：

setState() 是异步的——promise 也是如此。 setState 不太可能导致竞争条件。