无法使用 setInterval 对未安装的组件执行 React 状态更新

Question

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

Can't perform a React state update on an unmounted component.

有什么帮助吗？

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

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

Answer 1

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

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

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

useEffect 回调中的返回函数在您的组件卸载时被调用。代码只是清除组件卸载时的间隔。

无法使用 setInterval 对未安装的组件执行 React 状态更新

Can't perform a React state update on an unmounted component with setInterval

setinterval

reactjs

react-hooks