为什么这段实现SWR间隔拉取的代码无法正常运行？

问题根因 #

你的代码核心问题是 useSWR 入参顺序不符合规范，正确的参数顺序是 useSWR(缓存key, fetcher函数, 配置项对象)，你错误将 fetcher 封装到了第二个参数的对象中，导致 refreshInterval 配置完全不生效，fetcher 本身也无法被正常调用。

可直接运行的修正代码 #

const fetchSupplyInfo = (slice, accounts) => async (...args) => {
  // 增加初始化校验，避免实例未加载完成时报错
  if (!slice || !Array.isArray(accounts) || !accounts.length) return null
  const data = await slice.methods.sliceParams().call({ from: accounts[0] })
  return data[0]
}

// 修正useSWR参数顺序
const { data: vSupply, error: error2 } = useSWR(
  'supplyInfo',
  fetchSupplyInfo(slice, accounts),
  { refreshInterval: 1000 }
)

console.log('vSupply', vSupply)

可选优化配置 #

• 如果需要页面在后台失焦状态下也持续刷新，可在配置项中增加 refreshWhenHidden: true
• 如果 slice 或 accounts 会动态变更，建议将其加入SWR缓存key，修改为 useSWR(['supplyInfo', slice, accounts], ...)，实例变更时会自动触发重新请求
• SWR默认会等待上一次请求完成后再触发下一次刷新，不会出现请求堆叠问题，无需额外做防抖处理

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