React Native中通过Props启动计时器的问题排查

嘿，这个问题我之前也碰到过，给你两个实用的解决方案，应该能帮你搞定！

return (<CountDown/>)

你的核心需求是让

return (<CountDown/>)

return (<Timer/>)

方案一：给CountDown添加模式控制Props #

直接给CountDown组件传入一个mode属性，明确它当前要工作的模式，内部根据模式切换逻辑：

function CountDown({ initialValue, mode = "static" }) {
  const [currentValue, setCurrentValue] = useState(initialValue);

  useEffect(() => {
    let intervalId;
    // 只有在倒计时模式且数值大于0时，启动定时器
    if (mode === "countdown" && currentValue > 0) {
      intervalId = setInterval(() => {
        setCurrentValue(prev => prev - 1);
      }, 1000);
    }
    // 组件卸载或模式切换时，清理定时器避免内存泄漏
    return () => clearInterval(intervalId);
  }, [mode, currentValue]);

  // 静态模式直接用初始值，倒计时模式用实时更新的currentValue
  const displayValue = mode === "static" ? initialValue : currentValue;

  return <div className="countdown-display">{displayValue}</div>;
}

然后在父组件

return (<Timer/>)

function Timer({ edit }) {
  const [timerState, setTimerState] = useState("EDITING");
  const [inputValue, setInputValue] = useState(60);

  // 根据编辑状态和Timer自身状态，判断CountDown的工作模式
  const countDownMode = (edit || timerState === "EDITING") ? "static" : "countdown";

  return (
    <div className="timer-container">
      {/* 编辑状态显示输入框，非编辑状态显示CountDown */}
      {edit && timerState === "EDITING" ? (
        <input
          type="number"
          value={inputValue}
          onChange={(e) => setInputValue(Number(e.target.value))}
          min="1"
        />
      ) : (
        <CountDown initialValue={inputValue} mode={countDownMode} />
      )}

      {/* 状态切换按钮 */}
      <button onClick={() => {
        if (timerState === "EDITING") setTimerState("READY");
        else if (timerState === "READY") setTimerState("TICKING");
        else setTimerState("EDITING");
      }}>
        {timerState === "EDITING" ? "确认" : timerState === "READY" ? "开始倒计时" : "重置"}
      </button>
    </div>
  );
}

方案二：拆分逻辑，让CountDown只专注倒计时 #

如果不想让CountDown承担两种模式的逻辑，可以在父组件里直接分支渲染：静态展示时直接输出数值，需要倒计时时再渲染CountDown组件，这样CountDown的职责更单一：

function Timer({ edit }) {
  const [timerState, setTimerState] = useState("EDITING");
  const [inputValue, setInputValue] = useState(60);

  return (
    <div className="timer-container">
      {edit && timerState === "EDITING" ? (
        <input
          type="number"
          value={inputValue}
          onChange={(e) => setInputValue(Number(e.target.value))}
          min="1"
        />
      ) : (
        <>
          {/* 静态模式直接显示数值，倒计时模式渲染CountDown */}
          {(edit || timerState === "EDITING") ? (
            <div className="countdown-display">{inputValue}</div>
          ) : (
            <CountDown initialValue={inputValue} />
          )}
        </>
      )}

      {/* 状态切换按钮 */}
      <button onClick={() => {
        if (timerState === "EDITING") setTimerState("READY");
        else if (timerState === "READY") setTimerState("TICKING");
        else setTimerState("EDITING");
      }}>
        {timerState === "EDITING" ? "确认" : timerState === "READY" ? "开始倒计时" : "重置"}
      </button>
    </div>
  );
}

// 此时CountDown只需要处理倒计时逻辑
function CountDown({ initialValue }) {
  const [currentValue, setCurrentValue] = useState(initialValue);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentValue(prev => {
        if (prev <= 1) {
          clearInterval(intervalId);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return <div className="countdown-display">{currentValue}</div>;
}

额外优化建议 #

• 不管用哪种方案，一定要记得清理定时器副作用，避免组件卸载后定时器还在运行导致内存泄漏；
• 可以给CountDown添加onFinish回调，当倒计时结束时通知父组件切换状态（比如从TICKING回到READY）；
• 静态模式下，如果用户修改输入值，要确保展示的数值能实时更新，所以要把输入值作为依赖项传入相关逻辑。

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