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

Question

我试图setStatesetInterval函数内部，我得到：

无法对未挂载的组件执行 React 状态更新。

有什么帮助吗？

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回调中返回的函数在组件卸载时调用。代码只是在卸载组件时清除间隔。