React中如何为setTimeout实现带撤销按钮的倒计时邀请功能？

你不需要引入lodash，基于现有代码只需要做少量修改就能实现倒计时展示功能，改动方案如下：

核心改动步骤 #

• 新增2个状态存储倒计时相关数据

// 倒计时数值，初始为10秒
const [countdown, setCountdown] = useState(10);
// 存储倒计时循环定时器ID，用于撤销时清空
const [intervalId, setIntervalId] = useState();

• 修改handleSubmitInvite逻辑，点击邀请后同时启动邀请延迟定时器和倒计时更新定时器

const handleSubmitInvite = (e) => {
  e.preventDefault();
  // 10秒后正式发送邀请的定时器
  const inviteTimeoutId = setTimeout(() => {
    inviteToTeam(e);
    // 邀请发送后重置所有状态
    setSent(false);
    setCountdown(10);
    clearInterval(intervalId);
  }, 10 * 1000);
  // 每秒更新倒计时的循环定时器
  const countIntervalId = setInterval(() => {
    setCountdown(prev => {
      if (prev <= 1) {
        clearInterval(countIntervalId);
        return 0;
      }
      return prev - 1;
    });
  }, 1000);
  // 更新所有关联状态
  setSent(true);
  setTimeoutId(inviteTimeoutId);
  setIntervalId(countIntervalId);
};

• 修改onUndoClick逻辑，撤销时清空所有定时器并重置状态

// 不需要传参，直接使用状态中存储的定时器ID即可
const onUndoClick = () => {
  clearTimeout(timeoutId);
  clearInterval(intervalId);
  setSent(false);
  setCountdown(10);
};

• 修改渲染逻辑，在撤销按钮上展示剩余倒计时

{sent && <button onClick={onUndoClick}>撤销 ({countdown}秒)</button>}

额外优化建议 #

可以加一个卸载时清空定时器的逻辑，避免组件提前销毁时出现内存泄漏：

useEffect(() => {
  return () => {
    if (timeoutId) clearTimeout(timeoutId);
    if (intervalId) clearInterval(intervalId);
  };
}, [timeoutId, intervalId]);

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