无法使用setInterval对已卸载的组件执行反应状态更新 [英] Can't perform a React state update on an unmounted component with setInterval

问题描述

我尝试在setState内部setInterval函数，得到：

无法对已卸载的组件执行反应状态更新。

有帮助吗？

useEffect(() => {
  NewTimer()
}, [])

const NewTimer = () => {
  let count = 0
  let timer = setInterval(() => {
    count++
    if (count === 10) {
      clearInterval(timer);
    }
    setCounter(count)
  }, 1000);
}

推荐答案

这可能是因为您的时间间隔正在运行，尽管您的组件已卸载(我不知道是否已卸载，但可能已卸载)。我建议您这样做：

useEffect(() => {
  let count = 0
  let timer = setInterval(() => {
    count++
    if (count === 10) {
      clearInterval(timer);
    }
    setCounter(count)
  }, 1000);

  return () => {
    clearInterval(timer);
  }
}, [])

useEffect回调中返回的函数在组件卸载时调用。该代码仅清除卸载组件时的时间间隔。

这篇关于无法使用setInterval对已卸载的组件执行反应状态更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！