React Hooks中useEffect清理setInterval失效及Loading组件状态异常问题

你的问题其实是React Hooks里闭包陷阱和状态更新方式导致的，完全不用切换到类组件，我帮你一步步修复：

问题1：loadingStatus只更新一次 #

你在useEffect里用了空依赖数组[]，这意味着effect只会在组件挂载时执行一次。里面的setLoadingStatus(loadingStatus + ".")捕获的是初始的loadingStatus值（也就是.），每次定时器触发时，都是在这个初始值上加，结果永远是..，之后就不会再变了。

修复方式：改用函数式更新状态，这样React会自动把最新的状态传给你，不需要依赖loadingStatus：

setLoadingStatus(prevStatus => prevStatus + ".")

问题2：组件卸载后定时器仍在运行 #

你用useState存定时器IDloop，但setLoop是异步的，当cleanup函数执行时，loop还是初始的undefined，所以clearInterval(loop)等于没执行。

修复方式：直接在useEffect内部用变量存储定时器ID，利用闭包特性，cleanup函数能直接拿到这个最新的ID：

完整修复后的代码 #

import React, { useEffect, useState } from 'react'

const Loading = () => {
  const [loadingStatus, setLoadingStatus] = useState('.')

  useEffect(() => {
    // 直接在effect里存定时器ID
    const intervalId = setInterval(() => {
      console.log("loading")
      // 函数式更新状态，获取最新值
      setLoadingStatus(prevStatus => prevStatus + ".")
    }, 1000)

    return function cleanup() {
      console.log('cleaning up')
      clearInterval(intervalId)
    }
  }, []) // 空依赖没问题，因为我们用了函数式更新

  return (<p> {`Loading ${loadingStatus}`} </p>)
}

export default Loading

额外说明 #

• 函数式状态更新是处理这种“基于前一个状态更新”场景的标准做法，能避免闭包带来的旧状态捕获问题。
• 定时器ID不需要存在state里，因为它只在effect的生命周期内有用，用局部变量+闭包就足够了。

内容的提问来源于stack exchange，提问作者Darruma