React中magicLinkState为sent时，如何实现resendTime每秒递减1持续10秒？

问题原因 #

你的代码只在第一秒更新状态，核心问题是闭包陷阱：

• 原useEffect的依赖数组为空，导致回调里捕获的resendTime始终是初始值，每次定时器执行setResendTime(resendTime - 1)都是基于同一个初始值计算，状态只会更新一次。
• 直接把resendTime加入依赖数组会触发重复创建定时器，导致多个定时器同时运行，反而引发混乱。

解决方案 #

使用函数式状态更新获取最新状态值，同时合理设置依赖数组：

方案1：基础版（仅在magicLinkState变为sent时启动倒计时）

useEffect(() => {
  let timer;
  // 当魔法链接状态为sent且倒计时未结束时启动定时器
  if (magicLinkState === "sent" && resendTime > 0) {
    timer = setInterval(() => {
      // 函数式更新，确保基于最新状态计算
      setResendTime(prevTime => prevTime - 1);
    }, 1000);
  }
  // 组件卸载或状态变化时清除定时器，避免内存泄漏
  return () => clearInterval(timer);
}, [magicLinkState]); // 仅依赖magicLinkState，确保状态变为sent时触发

方案2：进阶版（倒计时结束自动停止）

如果需要在resendTime归0时自动停止定时器，可以调整依赖和逻辑：

useEffect(() => {
  let timer;
  if (magicLinkState === "sent" && resendTime > 0) {
    timer = setInterval(() => {
      setResendTime(prev => prev - 1);
    }, 1000);
  } else if (resendTime === 0) {
    // 倒计时结束，主动清除定时器
    clearInterval(timer);
  }
  return () => clearInterval(timer);
}, [magicLinkState, resendTime]); // 依赖加入resendTime，监听倒计时变化

关键说明 #

• 函数式更新setResendTime(prev => prev - 1)可以绕过闭包限制，每次都获取最新的状态值进行计算。
• 清理函数必须存在，防止组件卸载后定时器仍在后台运行，造成不必要的性能消耗。

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