debugging 在为计时器调用函数后,我的useeffect不运行

wdebmtf2  于 2023-01-02  发布在  其他
关注(0)|答案(1)|浏览(143)

github回购协议:https://github.com/JonathanDaboush/timer.git你好,我正在建立一个计时器倒计时一定的分钟数到零。函数切换从我所谓的工作和休息时间。唯一的问题是,在一个函数被调用后,如播放使用效果不会再次运行。从我的研究,它似乎在一个设置react钩子被调用后,然后继续使用效果,但在这种情况下,不是这样的。

import React,{useEffect,useState} from "react";
import 'bootstrap/dist/css/bootstrap.css';

 let Timer=()=>{
    let [min,setMin]=useState("00");
    let [hour,setHour]=useState("00");
    let [playIcon,setPlayIcon]=useState("btn btn-primary btn-lg rounded-circle ");
    let [stopIcon,setStopIcon]=useState("btn  btn-danger btn-lg rounded-circle ");
    let [editIcon,setEditIcon]=useState("btn btn-success  btn-lg rounded-circle ");
    let [play,setPlay]=useState(false);
    let [edit,setEdit]=useState(true);
    let [stop,setStop]=useState(false);
    let [isVisible,setIsVisible]=useState("d-block");
    let [minutes,setMinutes]=useState(0);
    let [breakTime,setBreakTime]=useState(0);
    let [seconds,setSeconds]=useState(0);
    let [isWork,setIsWork]=useState(true);
    let[focusTime,setFocusTime]=useState(-1);

    let [isPause,setIsPause]=useState(true);
    let [secondSpare,setSecondSpare]=useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
        //doesnt update incremently.
     setSeconds((seconds)=>{return seconds+1;});
        if(!edit&&!isPause){
console.log('hi');
            if((seconds/60)===focusTime){
                setEdit((edit)=>{return true;});
                setIsWork((isWork)=>{return !isWork;})
                if(isWork){
                    setFocusTime((focusTime)=>{return breakTime});
                    alert('worktime');
                }
                else{
                    setFocusTime((focusTime)=>{return minutes});
                    alert('breaktime');
                }
                setSeconds((seconds)=>{return 0;});
                //set clock;
                let newTime=focusTime;
                let newHours=Math.trunc(newTime/60);
                let newMinutes=newTime%60;
                setMin((min)=>{return toString(newMinutes)});
                setHour((hour)=>{return toString(newHours);});
            }
            adjustTime();
         }
        }, 1000);

        return () => clearInterval(interval);
        },[]);
    
      

let adjustTime=()=>{
    let minutesDown=Math.trunc((seconds/60));
    let adjustedTime=(focusTime)-minutesDown;
    let newHours=Math.trunc(adjustTime/60);
    let newMinutes=adjustTime%60;

    setMin(toString(newMinutes));
    setHour(toString(newHours));
}
    let playF=()=>{
        if(play==false){
       
        setPlay(true);
        setEdit(false);
        setStop(false);

        //to switch to pause.
        /**first pause becomes false. set seconds */
      
        setIsPause(false);
        setSeconds(secondSpare);
        setSecondSpare( 0);}
    
    }
    let editF=()=>{
        if(edit==false)
        {
        setPlay(false);
        setEdit(true);
        if(!edit){
            setIsVisible("d-block");
        }
        else{
            setIsVisible("d-none");
        }
        setStop(false);
        //to switch to pause.
        /**pause turns to tru.seconds is set to zero.spare takes seconds */
        if(stop==false){
        setIsPause(true);
        setSecondSpare( seconds);
        setSeconds(0);}
    
        }

    }
    let stopF=()=>{
        if(stop==false){
        setPlay(false);
        setStop(true);
        //to switch to pause.
        /**pause turns to tru.seconds is set to zero.spare takes seconds */
            if(edit==false){
        setIsPause(true);
        setSecondSpare(seconds);
        setSeconds(0);}
    
    }

    }

    return(<div>
    <div className={isVisible}>
    <h1>Countdown Timer</h1>
        <input type="number"  id="target" min="1" value={minutes} onChange={(e)=>{setMinutes((minutes)=>{return e.target.value;})}} />
        <label htmlFor="target">:time in minutes</label>

        <div><hr /></div>

        <input type="number"   id="breakTarget" min="1" value={breakTime} onChange={(e)=>{setBreakTime((breakTime)=>{return e.target.value;})}} />
        <label htmlFor="breakTarget">:break time in minutes</label>
    </div>
<div>{hour}:{min}</div>
<div className="d-flex justify-content-between">
    <button onClick={playF} className={playIcon} >start</button>
    <button onClick={editF} className={editIcon} >edit</button>
    <button onClick={stopF} className={stopIcon}>stop</button>
</div>
    </div>);
 }
 export default Timer;
c86crjj0

c86crjj01#

当参数改变时触发效果的参数是作为数组[]的第二个参数。当你使用useEffect(... , [])时,它只在第一次渲染时运行。你可能想尝试useEffect(..., [thingThatTriggersTheEffect, thing2, ..., etc])。也就是说,每当thing2改变时,它将触发效果。

相关问题