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;
1条答案
按热度按时间c86crjj01#
当参数改变时触发效果的参数是作为数组
[]
的第二个参数。当你使用useEffect(... , [])
时,它只在第一次渲染时运行。你可能想尝试useEffect(..., [thingThatTriggersTheEffect, thing2, ..., etc])
。也就是说,每当thing2
改变时,它将触发效果。