Вызов функции с setInterval каждую секунду с помощью useEffect - PullRequest
Новая
       89

Вызов функции с setInterval каждую секунду с помощью useEffect

0 голосов
/ 06 августа 2020

В настоящее время я работаю над приложением «Будильник» и использую 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
 }))
}

Для refre sh через каждую секунду, так что часы на самом деле тикают Я использовал этот. Каждую секунду вызываются 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 не работает и продолжает выводить в консоли «пожалуйста, установите будильник». Кто-нибудь знает, в чем может быть проблема? Спасибо.

Ссылка на коды и ящик здесь

Ответы [ 2 ]

2 голосов
/ 06 августа 2020

Ваш setInterval вызывается только тогда, когда компонент монтируется или размонтируется, потому что зависимость является пустым массивом, в то время как в вашем случае вам нужно сделать так, чтобы он зависел также от времени, так как время - это состояние, в котором изменяется сигнал тревоги 

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

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

Попробуйте это

0 голосов
/ 06 августа 2020

SetInterval не работает должным образом с перехватчиками реакции. Вы можете go с помощью этого руководства Дэна Абрамова, чтобы понять, как его лучше использовать.

...