React ahooks useRequest：staleTime导致手动刷新失效的解决办法

你遇到的问题是因为useRequest默认的refresh方法会遵循staleTime缓存策略——当数据处于新鲜期（5秒内）时，调用refresh不会触发新请求。不过ahooks已经提供了直接的解决方案，不需要额外写useEffect清缓存：

直接给refresh方法传入{ force: true }参数，强制绕过缓存发起新请求。

修改后的核心代码如下：

// 在Article组件的按钮中修改refresh调用
<button type="button" onClick={() => refresh({ force: true })}>
  refresh
</button>

完整修改后的代码：

import { useBoolean } from "ahooks";
import Mock from "mockjs";
import React from "react";
import { useRequest } from "ahooks";

async function getArticle(): Promise<{ data: string; time: number }> {
  console.log("cacheKey-staleTime");
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: Mock.mock("@paragraph"),
        time: new Date().getTime()
      });
    }, 1000);
  });
}

const Article = () => {
  const { data, loading, refresh } = useRequest(getArticle, {
    cacheKey: "staleTime-demo",
    staleTime: 5000
  });
  if (!data && loading) {
    return <p>Loading</p>;
  }
  return (
    <>
      {/* 这里修改为带force参数的refresh调用 */}
      <button type="button" onClick={() => refresh({ force: true })}>
        refresh
      </button>
      <p>Background loading: {loading ? "true" : "false"}</p>
      <p>Latest request time: {data?.time}</p>
      <p>{data?.data}</p>
    </>
  );
};

export default () => {
  const [state, { toggle }] = useBoolean();
  return (
    <div>
      <button type="button" onClick={() => toggle()}>
        show/hidden
      </button>
      {state && <Article />}
    </div>
  );
};

这样修改后，不管是否在最后一次刷新的5秒内，点击refresh按钮都会立即发起新请求获取最新文章，同时原来的staleTime逻辑依然生效——隐藏后再显示时，若数据过期会自动刷新。

内容的提问来源于stack exchange，提问作者Nathan Tew