Question

目前，我正在开发闹钟应用，并且正在使用ReactJS。当我尝试比较当前时间的状态和警报时间的状态时，会出现问题。

这是我用来获取当前时间并将其插入状态的函数。

//Insert current time to state
function currentTime(){
 let time = new Date().toLocaleTimeString('it-IT');
 let hours = time.substr(0,2);
 let minutes = time.substr(3,2);
 let seconds = time.substring(time.length-2)

 setTime(prevState => ({
  ...prevState,
  currentHour:hours,
  currentMinute:minutes,
  currentSecond:seconds
 }))
}

与以前一样，但是我要约会了

//Insert current date to state
function currentDate(){
 let date = new Date();
 let day = days[date.getDay()];

 setTime(prevState => ({
  ...prevState,
  currentDay:day
 }))
}

每秒刷新一次，因此时钟实际上是在滴答作响。每隔一秒钟就会调用一次currentTime（），currentDate（）和checkTime（）。

  //Update current time every second
  useEffect(()=>{
   const interval = setInterval(() => {
   currentTime();
   currentDate();
   checkTime();
  }, 1000);

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

这是问题所在。应该使用功能checkTime每秒检查一次是否充满了alarmHours状态。

 function checkTime(){
  if(!time.alarmHours){
   console.log('please set alarm');
  }else{
   console.log('alarm set')
  }
 }

即使alarmHours状态已满，它也会不断抛出“请设置警报”。为了填充它，我使用了Alarm.js组件，该组件通过单击右上角的“设置警报”按钮进行调用。显示输入框，填写后单击“设置闹钟”。状态将被填充，但checkTime函数的行为不尽如人意，并不断在控制台中引发“请设置警报”。有人知道可能是什么问题吗？谢谢。

代码和框的链接 is here

Answer 1

您的setInterval仅在安装或卸载组件时调用，因为依赖项是一个空数组，而在您的情况下，您还需要使其依赖于时间，因为时间是警报更改的状态

  useEffect(()=>{
   const interval = setInterval(() => {
   currentTime();
   currentDate();
   checkTime();
  }, 1000);

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

尝试一下

Answer 2

SetInterval不能与预期挂钩一起正常工作。您可以阅读Dan Abramov的guide，了解如何更好地使用它。

通过useEffect每秒调用一次setInterval函数

2 个答案: