react实现每隔60s刷新一次接口的示例代码

const [count, setCount] = useState(0);
useEffect(() => {
  const interval = setInterval(() => {
  console.log(count)
    setCount(count+1)
  }, 60000);
    return () => clearInterval(interval);
},[])
  return (
       <>
          <div>count计数器: {count}</div>
       </>
);

export const useLatestValue = (value) => {
  const ref = useRef(value);
  ref.current = value;
  return ref;
};
只需要将count入参useLatestValue(count)即可开启ref挂载之路。

export default () => {
  const [count, setCount] = useState(0);
  const ref = useLatestValue(count);
  useEffect(() => {
    const interval = setInterval(() => {
      console.log("count:", count);
      setCount(ref.current + 1);
    }, 60000);
    return () => clearInterval(interval);
  }, []);
  return (
    <>
      <div>count计数器: {count}</div>
    </>
  );
};

    export const useLatestValue = <T>(value：T):{current:T} => {
      const ref = useRef(value);
      ref.current = value;
      return ref;
    };

function ApiRefresh() {
  // 初始化为null，避免渲染时出现undefined的情况
  const [apiResponse, setApiResponse] = useState<ApiResponse | null>(null); 
  const [loading, setLoading] = useState(false); // 控制loading状态
    // 显示接口返回值的姓名，如果为空则显示Loading...
  return <div>{apiResponse ? apiResponse.name : "Loading..."}</div>; 
}

interface ApiResponse {
  // 假设接口返回的是一个包含name和age字段的对象
  name: string;
  age: number;
}
function ApiRefresh() {
  const [apiResponse, setApiResponse] = useState<ApiResponse | null>(null);
  const [loading, setLoading] = useState(false);
  // 在组件加载完成后，每隔60s刷新一次接口
  useEffect(() => {
    setLoading(true); // 刷新时，显示loading状态
    const timer = setInterval(() => {
      axios.get<ApiResponse>("https://example.com/api").then(response => {
        setApiResponse(response.data);
        setLoading(false); // 刷新完成后，隐藏loading状态
      });
    }, 60000);
    // 组件卸载时，清除定时器
    return () => clearInterval(timer);
  }, []);
  return <div>{apiResponse ? apiResponse.name : (loading ? "Loading..." : "")}</div>;
}