React组件中更新page状态后useSWR未触发数据重新请求的解决方法

这个问题我碰到过好几次啦，核心原因是useSWR的缓存策略依赖于你传入的缓存键，再加上你的fetcher函数写法有个小疏漏，咱们一步步来解决：

• 让缓存键随page动态变化：useSWR判断是否需要重新发起请求的核心依据是第一个参数（缓存键）是否发生改变。你现在传的是固定字符串'/my/products'，不管page怎么更新，缓存键始终不变，SWR自然会认为数据不需要刷新。
  解决办法很简单，把缓存键改成数组形式，把page作为第二个元素加进去：

  const { data, error } = useSWR(['/my/products', page], () => {
    return fetchMyData(baseUrl, page)
  });
  

  这样每次page更新，缓存键就会变成新的数组，SWR会立刻识别到需要获取新数据，自动调用fetcher函数。

• 修复fetcher函数的返回值：你原来的fetcher函数里漏掉了return！useSWR要求fetcher必须返回一个Promise，不返回的话SWR无法正确处理异步请求的结果，甚至可能导致请求根本不触发。一定要加上return，确保fetcher把异步请求的Promise传递给SWR。

• 可选：手动触发重新请求（mutate）：如果不想修改缓存键，也可以在点击按钮后手动调用SWR的mutate方法强制刷新数据，这种方法适合一些特殊场景：
  首先要从useSWR的返回值中拿到mutate函数：

  const { data, error, mutate } = useSWR('/my/products', () => {
    return fetchMyData(baseUrl, page)
  });
  

  然后在点击事件里触发：

  const onBtnClick = ()=> {
    setPage(page+1);
    mutate(); // 手动触发重新请求
  }
  

  这里要注意，page更新后组件会重新渲染，mutate执行时已经能拿到新的page值，所以fetcher会用最新的page去请求数据。

修改后的完整代码示例 #

export const MyViewComponent = (props: {... }) => {
  const [page, setPage] = useState(1);

  // 修复后的useSWR调用：缓存键包含page，fetcher返回Promise
  const { data, error } = useSWR(['/my/products', page], () => {
    return fetchMyData(baseUrl, page);
  });

  const onBtnClick = ()=> {
    setPage(page+1);
  }

  return (
    <div>
      {/* 在这里渲染你的数据内容 */}
      <button onClick={onBtnClick}>Next</button>
    </div>
  );
}

备注：内容来源于stack exchange，提问作者user842225