Reactjs 反应25+；freecodecamp测试失败的5个时钟

我正在为freecodecamp认证制作25+5时钟，但2次测试失败

计时器的测试10和11错误。 “25+5时钟已暂停，但时间继续流逝：预期'58'等于'59'”

就我而言，它正在工作，您可以在部署的项目中自己测试它1

您可以尽可能快地单击“播放和暂停”按钮，它可以正常工作

但测试结果并非如此

这两天来，我一直在查看stackoverflow、freecodecamp论坛和谷歌关于这个问题的信息

我做了很多改变，但不可能找到问题

有人能帮我吗

车身部件

import React from 'react';
import Compteur from './Compteur';
import Config from './Config';
import { useState, useEffect } from 'react';

const Body = () => {

const [sessionCounter, setSessionCounter] = useState(1500);
const [breakCounter, setBreakCounter] = useState(300);
const [counterScreenSession, setCounterScreenSession] = useState(sessionCounter);
const [play, setPlay] = useState(false);
const [session, setSession] = useState(true);

const handleSessionCounter = (e) => {
    let number = e.currentTarget.dataset.session
    if(number === "up"){
        if(sessionCounter<3600){
            return setSessionCounter(sessionCounter+60);
        }else{
            return sessionCounter;
        }
        
    }
    else{
        if(sessionCounter >= 120){
            return setSessionCounter(sessionCounter-60);
        }else{
            return sessionCounter;
        }
        
    }
}

const handleBreakCounter = (e) => {
    let number = e.currentTarget.dataset.breaker
    if(number === "up"){
        if(breakCounter<3600){
            return setBreakCounter(breakCounter+60);
        }else{
            return breakCounter;
        }
        
    }
    else{
        if(breakCounter >= 120){
            return setBreakCounter(breakCounter-60);
        }else{
            return breakCounter;
        }
        
    }
}

const handleClear = () => {
    setPlay(false);
    setSession(true);
    setBreakCounter(300);
    setSessionCounter(1500)
    document.getElementById("beep").pause();
    document.getElementById("beep").currentTime=0;
    return setCounterScreenSession(1500);
}

const handleCounterScreen = () => {
    setPlay(play=>!play);
}

useEffect(() => {

    if(play && counterScreenSession>0){
        const timer = window.setInterval(()=>{
            setCounterScreenSession(counterScreenSession => counterScreenSession-1);
     }, 1000);
     return ()=>{
            clearInterval(timer)
        }
    }

}, [play, counterScreenSession])


useEffect(() => {

    if(counterScreenSession===0 && session){
            document.getElementById("beep").play();
            setCounterScreenSession(breakCounter);
            setSession(!session);
    }

    if(counterScreenSession===0 && !session){
            setCounterScreenSession(sessionCounter);
            setSession(!session);
    }


}, [counterScreenSession, session, breakCounter, sessionCounter])

useEffect(()=>{

    return setCounterScreenSession(sessionCounter);

}, [sessionCounter, breakCounter])

const timeCounter = () =>{
    let minutes = Math.floor(counterScreenSession/60);
    let seconds = counterScreenSession%60;

    if(minutes<10){
        minutes = "0"+minutes;
    }

    if(seconds<10){
        seconds = "0"+seconds;
    }

    return `${minutes}:${seconds}`;
}


return (
    <div className="body">
    <Config handleBreakCounter={handleBreakCounter} handleSessionCounter={handleSessionCounter} 
sessionCounter={sessionCounter} breakCounter={breakCounter}/>
    <Compteur counterScreenSession={counterScreenSession} play={play} handleCounterScreen= 
{handleCounterScreen} handleClear={handleClear} session={session} sessionCounter={sessionCounter} 
timeCounter={timeCounter} breakCounter={breakCounter}/>
    </div>
);
};

export default Body;

    import React from 'react';
    import { AiFillPauseCircle, AiFillPlayCircle } from "react-icons/ai";
    import {VscDebugRestart} from "react-icons/vsc";
    import { CircularProgressbar } from 'react-circular-progressbar';
    import 'react-circular-progressbar/dist/styles.css';

    const Compteur = ({counterScreenSession, play, handleCounterScreen, handleClear, session, 
    timeCounter,breakCounter,sessionCounter}) => {

    
    return (
        <div className={"compteur"} >
            <div className="compteur__name" id="timer-label">{session? "Session" : "Break"}</div>
            <CircularProgressbar 
            className="compteur__animation" 
            value={counterScreenSession} 
            minValue={0} 
            maxValue={session? sessionCounter:breakCounter } 
            counterClockwise="true"
               styles={{
                path:{
                    stroke: "#005479"
                },
                trail:{
                    stroke:"#A8223A"
                }}
            } 
            />
            
            <div className="compteur__time"  
            className={counterScreenSession<600 && counterScreenSession%60<5?"compteur__time 
    compteur__name--red" : "compteur__time" }id="time-left">
            {
                /*
                counterScreenSession<600 && counterScreenSession%60<10 ?
                "0"+Math.floor(counterScreenSession/60)+":0"+counterScreenSession%60:
                counterScreenSession>599 && counterScreenSession%60<10 ?
                Math.floor(counterScreenSession/60)+":0"+counterScreenSession%60:
                counterScreenSession<600 && counterScreenSession%60>10 ?
                "0"+Math.floor(counterScreenSession/60)+":"+counterScreenSession%60:
                Math.floor(counterScreenSession/60)+":"+counterScreenSession%60  
                */
                timeCounter()
            }
            </div>
            <audio id="beep" src="./sound/duke-game-over.mp3"></audio>
            <div className="compteur__controler">
            {
                play === false ?<button className="compteur__controler__play" id="start_stop" onClick= 
    {handleCounterScreen} ><AiFillPlayCircle/></button>:<button className="compteur__controler__break" 
    onClick={handleCounterScreen}><AiFillPauseCircle/></button>
            }
                
                
                <button className="compteur__controler__clear" id="reset" onClick={handleClear}> 
   <VscDebugRestart/></button>
            </div>
        </div>
     );
     };

    export default Compteur;

从“React”导入React；
从“/”导入计算机；
从“/Config”导入配置；
从“react”导入{useState，useEffect}；
常量体=（）=>{
const[sessionCounter，setSessionCounter]=useState（1500）；
const[breakCounter，setBreakCounter]=useState（300）；
const[counterScreenSession，setCounterScreenSession]=使用状态（sessionCounter）；
const[play，setPlay]=useState（false）；
const[session，setSession]=useState（true）；
常量handleSessionCounter=（e）=>{
让number=e.currentTarget.dataset.session
如果（数字==“向上”）{
如果（会话计数器=120）{
返回设置会话计数器（会话计数器-60）；
}否则{
返回会话计数器；
}
}
}
常量把手计数=（e）=>{
让number=e.currentTarget.dataset.breaker
如果（数字==“向上”）{
如果（断开计数器=120）{
返回立根计数器（breakCounter-60）；
}否则{
返回计数器；
}
}
}
常量handleClear=（）=>{
设置播放（假）；
设置会话（真）；
沉降计数器（300）；
设置会话计数器（1500）
document.getElementById（“beep”）.pause（）；
document.getElementById（“beep”）.currentTime=0；
返回设置反筛选会话（1500）；
}
常量句柄计数器屏幕=（）=>{
设置播放（播放=>！播放）；
}
useffect（（）=>{
如果（播放和反屏幕会话>0）{
const timer=window.setInterval（（）=>{
设置副标题会话（副标题会话=>副标题会话-1）；
}, 1000);
return（）=>{
清除间隔（计时器）
}
}
}，[play，counterScreenSession]）
useffect（（）=>{
if（反筛选会话===0&&session）{
document.getElementById（“beep”）.play（）；
设置计数器屏幕会话（计数器）；
设置会话（！会话）；
}
if（反筛选会话===0&&！会话）{
setCounterScreenSession（会话计数器）；
设置会话（！会话）；
}
}，[counterScreenSession，session，breakCounter，sessionCounter]）
useffect（（）=>{
返回设置计数器会话（会话计数器）；
}，[sessionCounter，breakCounter]）
常数计时器=（）=>{
让分钟数=数学楼层（副标题/60）；
让秒数=副屏会话%60；
如果（分钟）