每次刷新、localStorage、useState、useEffect 中的更新問題

Question

我試圖阻止我的應用程序 go 進入 useEffect 鈎子並在 5 秒內實現里面的內容，無論頁面是否刷新。

我的代碼仍然只在頁面刷新時觸發 useEffect 掛鈎。 它並不真正關心它是否在每次頁面刷新時觸發 5 秒，然后永遠不會做任何事情，除非您再次刷新頁面。 它就像一個帶有空依賴數組的 useEffect 鈎子。

無論頁面是否刷新，如何實現 useEffect 鈎子每 5 秒運行一次？ 這是我的片段。

  const localVisitTime = localStorage.getItem('localVisitTime');
  const currentTime = new Date().getTime();
  const timeDifference = currentTime - localVisitTime;

  const [ visitTime, setVisitTime ] = useState(localVisitTime);

  if (localVisitTime && timeDifference <= 5000) {
    // Do nothing, wait!
  } else {
    localStorage.setItem('localVisitTime', new Date().getTime());
    setVisitTime(localVisitTime);
  }

  useEffect(() => {

    const fetchData = async () => {
      console.log('Data fetched!');
    }

    fetchData();
  }, [visitTime]);

Answer 1

它沒有多次觸發的原因是檢查時差只發生一次，你應該使用一個設置的間隔來檢查時間是否有效並嘗試在 state 中設置時差，但我認為它沒有必要.

我相信即使在頁面刷新之間你也想保持這 5 秒的觸發，但如果它不重要，你總是可以在頁面刷新時重新開始。 我認為你應該使用設置的時間間隔而不用擔心這樣的刷新。

const fetchData = async () => {
  console.log("Data fetched!");
};

useEffect(() => {
  fetchData();
  const interval = setInterval(() => {
    fetchData();
  }, 5000);
  return () => clearInterval(interval);
}, []);

這樣，獲取數據將每 5 秒運行一次，並在每次刷新時運行