ahooks中useRequest设置cacheKey后仍重复发起请求如何解决？

核心原因 #

该问题是配置理解偏差+变量定义不规范共同导致的：

• 普通变量someVar定义在组件外部，本身不是响应式状态，通过select更新这个值时不会触发组件正常重渲染，依赖追踪逻辑本身存在异常。
• useRequest默认的staleTime（缓存新鲜时间）为0，意味着即使存在对应cacheKey的缓存，只要触发了请求动作（包括refreshDeps变化、手动调用run、组件重挂载），都会在返回缓存数据的同时重新发起请求拉取最新数据，不会直接拦截请求。
• refreshDeps的默认触发逻辑优先级高于初始化阶段的缓存读取逻辑，依赖变化时默认强制执行请求，不会主动判断缓存是否可用。

修复步骤 #

1. 将外部普通变量someVar改为组件内部用useState维护的响应式状态，保证select更新值时组件可以正常重渲染：

import { useState } from 'react';

// 组件内部声明状态
const [someVar, setSomeVar] = useState('someValue');
// select选择变更时，调用setSomeVar更新选中值即可

2. 给useRequest补充缓存策略配置，设置合理的缓存新鲜时间，在新鲜时间窗口内相同cacheKey的请求会直接读取缓存，不会重复发起：

import { useRequest } from 'ahooks';

const { data, loading } = useRequest(
  async () => someRequestThatDependOnVariable(someVar),
  {
    refreshDeps: [someVar],
    cacheKey: `request-${someVar}`,
    // 缓存新鲜时间，单位毫秒，示例为5分钟，时间范围内命中缓存直接返回，不发请求
    staleTime: 5 * 60 * 1000,
    // 缓存最长保留时间，超过时间后缓存会被自动回收
    cacheTime: 10 * 60 * 1000,
  },
);

额外说明 #

如果业务场景要求切回之前选中过的选项时永远不重新发起请求，可以把staleTime设置为Infinity，只要本地缓存存在就永远优先读缓存。如果需要强制更新缓存，手动调用run方法即可触发新的请求。

内容的提问来源于stack exchange，提问作者howard wolowitz