React Native中setInterval实现倒计时失效问题求助

问题根源分析 #

• 第一个useEffect依赖为空数组，导致回调里的countdown被固定在初始值20，每次调用setCountdown(countdown - 1)都只会把值设为19，无法持续递减。
• 第二个useEffect依赖同样为空数组，仅在组件初始化时执行一次，此时countdown是20，永远触发不了归0后的逻辑。
• 用let声明的intervalID会在组件每次重渲染时被重新初始化，可能导致后续无法正确清除定时器。

修复后的代码 #

import { useState, useEffect, useRef } from 'react';

// 假设timerReset是你已定义的重置函数
const CountdownComponent = () => {
  // 初始化20秒倒计时
  const [countdown, setCountdown] = useState(20);
  // 用useRef保存定时器ID，保证引用在组件生命周期内稳定
  const intervalID = useRef<any>(null);

  useEffect(() => {
    // 启动每秒执行一次的定时器
    intervalID.current = setInterval(() => {
      // 使用函数式更新，基于最新状态计算新值
      setCountdown(prevCount => prevCount - 1);
    }, 1000);

    // 组件卸载时清除定时器，防止内存泄漏
    return () => clearInterval(intervalID.current);
  }, []);

  useEffect(() => {
    // 每次countdown变化时检查是否归0
    if (countdown === 0) {
      timerReset();
      alert("TIMER RESET");
      clearInterval(intervalID.current);
    }
  }, [countdown]); // 添加countdown作为依赖，确保状态变化时触发检查

  return (
    <div>当前倒计时: {countdown}</div>
  );
};

export default CountdownComponent;

关键修复点说明 #

• 函数式更新状态：setCountdown(prevCount => prevCount - 1) 能避开闭包陷阱，每次都基于最新的状态值计算新的倒计时数。
• 补充依赖项：给第二个useEffect添加countdown依赖，让它在倒计时数值变化时自动执行，确保归0逻辑能被触发。
• 用useRef存定时器ID：useRef的current属性不会随组件重渲染改变，保证清除定时器时能拿到正确的ID。

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