问题

这是回调问题中状态的经典陈旧闭包，但存在一些额外的差异。

• timer在回调中，与初始渲染周期的值相同，因此它总是从相同的值递减。setInterval
• 当 prop 值发生更改时，钩子不会“重置”状态。useEffectCustomTimertimerstartTime
• 挂钩缺少依赖数组，因此它会在第一次更新后的每个渲染周期启动新的超时。useEffectAppintervalTime
• CustomTimer实际上是一个自定义的 React 钩子，它应该正确重命名为 .useCustomTimer

溶液

我建议使用 React ref 来保存对当前正在运行的计时器的引用，使用功能状态更新来排队状态更新，并在单独的钩子中检查当前过期。timertimeruseEffect

例：

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

function useCustomTimer(startTime) {
  const [timer, setTimer] = useState(startTime);
  const timerRef = useRef();           // <-- ref to hold current timer

  useEffect(() => {
    if (timer === 0) {                 // <-- check timer expiration
      console.log("Timer expired");
      clearInterval(timerRef.current);
    }
  }, [timer])

  useEffect(() => {
    if (startTime > 0) {
      setTimer(startTime);             // <-- reset timer when startTime changes

      timerRef.current = setInterval(
        setTimer,
        1000,
        (timer) => timer - 1           // <-- functional state update
      );
    }

    return () => {
      clearInterval(timerRef.current); // <-- clear on startTime change or unmount
    }
  }, [startTime]);

  return timer;
}

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

  const time = useCustomTimer(intervalTime);

  useEffect(() => {
    setTimeout(() => {
      console.log("Hi");
      setIntervalTime(500);
    }, 5000);
  }, []); // <-- add missing dependency array

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

演示

更新以包括在事件发生时重置开始时间"mousemove"

添加事件侦听器来重置状态是微不足道的。可以在 with as 依赖项中添加事件处理程序。timer"mousemove"useEffectstartTime

例：

useEffect(() => {
  if (timerRef.current === 0) {
    console.log("Timer expired");
    clearInterval(timerRef.current);
  }
}, [timer]);

useEffect(() => {
  if (startTime > 0) {
    setTimer(startTime);
    timerRef.current = setInterval(
      setTimer,
      1000,
      (timer) => timer - 1
    );
  }

  // Mousemove callback handler
  const handler = () => {
    setTimer(startTime);
  };

  // Instantiate passive mousemove handler
  document.addEventListener("mousemove", handler, true);

  return () => {
    clearInterval(timerRef.current);
    // Remove mousemove handler when startTime changes
    // or component unmounts
    document.removeEventListener("mousemove", handler, true);
  };
}, [startTime]);

结果也可以在这里测试==> 测试演示

首先，需要在文件中添加依赖项，因为每当它触发时，计时器都会从头开始。useEffectApp.js

App.js：

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(() => {
      setIntervalTime(500);
    }, 5000);
  }, []);  // Added dependency array here

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

自定义.js：（添加了注释行以解释添加/更新的行）

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    setTimer(startTime);
    let timerCounter = startTime;

    const myInterval = setInterval(() => {
      if (timerCounter > 0) {
        // Get the previous state and decrease it 
        setTimer(timer => timer - 1);
        timerCounter--;
        return;
      }

      // Clear interval after timer's work is done
      clearInterval(myInterval);
    }, 1000);

    return () => clearInterval(myInterval);
  }, [startTime]);

  return timer;
}

export default CustomTimer;