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

Question

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

#Timer 的测试 10 和 11 错误。 " 25 + 5 时钟已暂停，但时间仍在流逝：预期 '58' 等于 '59'"

在我这边，它正在工作，您可以自己测试它link 到此处部署的项目 1。

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

但测试没有。

我在 stackoverflow、freecodecamp 论坛、google 上查看这个问题已经有 2 天了。

我做了很多更改，但无法找到问题。

主体组件

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;

Compteur 组件

    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;

链接到 github 上的 repo here。

Answer 1

我遇到了同样的问题，并使用基于类的解决方案解决了它。

我的结果是 53 - 55。这意味着测试用例暂停的时间和测试用例重放的时间之间有 2000 毫秒（在您的情况下是 1000 毫秒）的差异。问题是因为我链接了哔声播放，然后设置状态（切换会话中断）并清除间隔（因此它连续触发三个不同的功能）。当我在调用 clearInterval 的函数中移动哔声播放和切换会话中断时，问题就解决了（所以它们都在该函数中“一起触发”）。

这种链接可能发生在这里：

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

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

所以如果我是你，我可能会尝试将这些哔声播放和 setsession 与 clearInterval 一起合并到 else 语句中的 return 函数中。虽然不确定它是否会成功，我什至不确定它是否可以这样玩，但玩弄这个想法可能是值得的。

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