React自定义Hook中setInterval清除与时间更新异常问题求助

核心问题 #

你的自定义Hook存在两个关键问题：

1. 闭包捕获旧值：setInterval回调里的timer是闭包捕获的初始state值，不会随state更新变化，导致setTimer(timer - 1)始终基于旧值计算，无法正确递减。
2. 定时器未正确响应参数变化：当startTime更新时，虽清除了旧定时器，但新定时器的回调仍受闭包限制，无法正确使用最新状态。

修复后的代码 #

Custom.js #

import { useEffect, useState } from 'react';

function CustomTimer(startTime) {
  const [timer, setTimer] = useState(startTime);

  useEffect(() => {
    // 重置timer为新的起始值
    setTimer(startTime);
    const myInterval = setInterval(() => {
      // 使用函数式更新获取最新state
      setTimer(prevTimer => {
        if (prevTimer <= 0) {
          // 计时结束后清除定时器
          clearInterval(myInterval);
          return 0;
        }
        return prevTimer - 1;
      });
    }, 1000);

    // 组件卸载或startTime变化时清除旧定时器
    return () => clearInterval(myInterval);
  }, [startTime]);

  return timer;
}

export default CustomTimer;

App.jsx（优化点） #

import React from 'react';
import './style.css';
import CustomTimer from './Custom';
import { useState, useEffect } from 'react';

export default function App() {
  const [intervalTime, setIntervalTime] = useState(200);

  const time = CustomTimer(intervalTime);

  useEffect(() => {
    setTimeout(() => {
      console.log('Hi');
      setIntervalTime(500);
    }, 5000);
  }, []); // 加空依赖数组，确保只在组件挂载时执行一次

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some happen! {time} </h2>
    </div>
  );
}

关键修改说明 #

• 函数式更新state：用setTimer(prevTimer => ...)替代直接使用timer，确保每次更新都能获取最新state值，规避闭包陷阱。
• 重置timer并清理旧定时器：当startTime变化时，先将timer重置为新起始值，同时清除旧定时器，再创建新定时器，保证计时从新值开始。
• 计时结束自动清理：当timer减到0时主动清除定时器，避免无效定时器持续运行。
• 优化App组件的useEffect：添加空依赖数组，防止重复创建setTimeout。

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