Блог

Может ли кто-нибудь помочь пролить свет на следующую проблему, которая у меня возникла? При первом запуске он работает так, как задумано, и ведет обратный отсчет (примечание, установленное значение 20000 для тестирования будет через 1 секунду после его работы). Однако после всех остальных итераций все setBeacon(900000) идет наперекосяк, и тайм-аут очень быстрый. Я создаю автономное приложение, чтобы проверить, не связано ли это с другими крючками.

  import React, { useEffect, useState, useRef} from 'react';
 import { useApi } from '../api/ApiCustomHook';
 import { getSubmitterEmpDetailsHeaders } from '../api/api'; 

 const SessionBeacon = (userObj) => {    
   const { invokeFetchCall } = useApi();  
   const [beacon, setBeacon] = useState(900000);

  useEffect(() => {
     const timer = setTimeout(() => {setBeacon(beacon - 20000)}, 1000);      
     console.log("Time Remaing beacon = "   beacon);
     if (beacon <= 600000) {        
         let getEmpServiceHeaders = getSubmitterEmpDetailsHeaders(
         userObj.userId
    );
    invokeFetchCall(
      getEmpServiceHeaders.url,
      getEmpServiceHeaders.fetchData 
    ); 

    console.log("Beacon after setBeacon is beacon = "   beacon);           
    return setBeacon(900000);
  }
}); 

return (  
        <div>
        Beacon Timer - {beacon}
        <br />
        <br />
        <br />            
        </div>
  )
 }

 export default SessionBeacon;
 

Сбросьте таймер, когда вы сбросите маяк.

 .
.
.
useEffect(() => {
    const timer = setTimeout(() => {
      setBeacon(beacon - 20000);
    }, 1000);
    console.log("Time Remaing beacon = "   beacon);
    if (beacon <= 600000) {
      .
      .
      .
      clearTimeout(timer);
      console.log("Beacon after setBeacon is beacon = "   beacon);
      return setBeacon(900000);
    }
  });
.
.
.