时间戳

首页 > 解决方案 > 用计时器反应 useEffect 和 useState 表现得很奇怪

reactjs - 用计时器反应 useEffect 和 useState 表现得很奇怪

问题描述

有人可以帮助阐明我遇到的以下问题吗？第一次运行时，它按设计运行并倒计时（注意设置为 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;

标签： reactjs

解决方案

重置信标时清除计时器。

.
.
.
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);
    }
  });
.
.
.

推荐阅读