Reactjs 当包含依赖项时，更新useEffect中的状态时出现问题

我在React中有此代码，我希望在屏幕上的时钟达到0时，倒计时会话/中断计时器交替。我遇到的问题是，当我没有在

useffect

钩子函数中包含

clockTime

作为依赖项时，计时器每1秒正确计数一次（我想），但是

clockTime

状态变量没有更新，因此当前时钟时间永远不会为0，当前会话将在0以下继续倒计时。另一方面，当我将

clockTime

作为依赖项包含时，

clockTime

状态变量被更新，它达到0，会话/中断计时器交替，但速率高于1秒。如何通过使会话/中断计时器交替和以1秒的速率运行来解决此问题

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [sessionTime, setSessionTime] = useState(10);
  const [breakTime, setBreakTime] = useState(5);
  const [clockTime, setClockTime] = useState(10);
  const [current, setCurrent] = useState('session');
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    if (isPlaying) {
      let startTime = new Date();
      const intervalId = setInterval(() => {
        if (clockTime === 0) {
          setCurrent(current === 'session' ? 'break' : 'session');
          setClockTime(current === 'session' ? breakTime : sessionTime);
        } else {
          setClockTime(
            (clockTime) =>
              clockTime +
              Math.floor((startTime.getTime() - new Date().getTime()) / 1000)
          );
        }
      }, 200);
      return () => {
        clearInterval(intervalId);
      };
    }
  }, [isPlaying, clockTime]);

  const handlePlayClick = () => {
    setIsPlaying(true);
  };

  const handlePauseClick = () => [setIsPlaying(false)];
  return (
    <div className='App'>
      <span>{clockTime}</span>
      <span>{current}</span>
      {isPlaying ? (
        <button onClick={handlePauseClick}>Pause</button>
      ) : (
        <button onClick={handlePlayClick}>Play</button>
      )}
    </div>
  );
}

export default App;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
函数App（）{
const[sessionTime，setSessionTime]=useState（10）；
const[breakTime，setBreakTime]=useState（5）；
常数[clockTime，setClockTime]=使用状态（10）；
const[current，setCurrent]=useState（'session'）；
const[isplay，setisplay]=useState（false）；
useffect（（）=>{
如果（显示）{
让startTime=新日期（）；
const intervalId=setInterval（（）=>{
如果（时钟时间===0）{
setCurrent（当前=='session'？'break'：'session'）；
setClockTime（当前=='session'？中断时间：sessionTime）；
}否则{
设定时钟时间(
（时钟时间）=>
时钟时间+
Math.floor（（startTime.getTime（）-new Date（）.getTime（））/1000）
);
}
}, 200);
return（）=>{
clearInterval（intervalId）；
};
}
}，[ISPlay，时钟时间]；
常量handlePlayClick=（）=>{
设置显示（真）；
};
const handlePauseClick=（）=>[setIsPlaying（false）]；
返回(
{时钟时间}
{current}
{isplay(
暂停
) : (
玩
)}
);
}
导出默认应用程序；