刷新页面后，useEffect运行api request

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [shouldFetch, setShouldFetch] = useState(true);

  useEffect(() => {
    if (shouldFetch) {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          setData(data);
          setShouldFetch(false); // 设置为 false 以避免重复请求
        });
    }
  }, [shouldFetch]);

  return (
    <div>
      {data ? <div>{data}</div> : <div>Loading...</div>}
    </div>
  );
}

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const cachedData = localStorage.getItem('myData');
    if (cachedData) {
      setData(JSON.parse(cachedData));
    } else {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          localStorage.setItem('myData', JSON.stringify(data));
          setData(data);
        });
    }
  }, []);

  return (
    <div>
      {data ? <div>{data}</div> : <div>Loading...</div>}
    </div>
  );
}