React Query中refetch失效问题及用户列表查询需求实现

问题根源 #

• Query Key 未关联查询参数：你的查询键仅为['users']，未包含keyword，导致React Query无法区分不同关键词的请求，refetch时可能复用旧缓存，无法获取最新数据。
• useEffect 依赖缺失：useEffect依赖数组为空，虽refetch在React Query中是稳定引用，但显式添加依赖可避免潜在渲染问题，确保初始调用的是最新的refetch函数。

修复后的代码 #

const UserList = () => {
  const [keyword, setKeyword] = useState('')

  // 将 keyword 加入 Query Key，让不同关键词对应独立缓存条目
  const { data: users, refetch } = useQuery(['users', keyword], () => getUsersApi(keyword), {
    enabled: false, // 禁用自动触发，仅通过 refetch 手动发起请求
  })

  // 初始加载数据，依赖数组添加 refetch 确保调用最新函数
  useEffect(() => {
    refetch()
  }, [refetch])

  return (
    <div>
      <div>
        <input type="text" onChange={e => setKeyword(e.target.value)} />
        <button onClick={() => refetch()}>Search Users</button>
      </div>
      <ul>
        {users?.map(({ id, name }) => (
          <li key={id}>{name}</li>
        ))}
      </ul>
    </div>
  )
}

关键改动说明 #

• Query Key 绑定 keyword：['users', keyword]确保每个关键词都有独立的缓存，点击搜索时React Query会根据当前keyword发起新请求（或复用对应缓存）。
• 完善 useEffect 依赖：将refetch加入依赖数组，避免组件重渲染导致的函数引用异常，保证初始加载能正确触发。
• 保持 enabled: false：严格控制请求触发时机，仅在组件初始挂载和点击搜索按钮时发起请求，完全匹配需求。

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