每次刷新、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 秒运行一次，并在每次刷新时运行