从 onClick 处理程序触发查询刷新（无效？）

Question

反应查询的新功能。有一个带有手动刷新按钮的漂亮表格。拥有表和按钮行的父级拥有查询，我通过 props 向下传递一个“重新加载”函数，onClick（向下几级）执行该函数：

const MyComponent = () => {
   
   var qKey = ['xyz', foo, bar];
   
   const reload = () => {
        useQueryClient().invalidateQueries(qKey)
   }

   const {isLoading, error, data, isFetching} = useQuery(qKey, async () => {
      /* stuff */
      return response.json()
    }, {keepPreviousData: true});

   return (
      <ActionsBar onRefresh={reload} onClear={foo} onSearch={bar}/>
      <Other stuff...>
   )
}

const ActionBar = (props) => {
   const {onRefresh, onClear, onSearch} = props;

   return (
      <Button onClick={ () => onRefresh()}>Refresh</Button>
      /* other stuff */

收到错误消息“reload”正在调用钩子，但不是 React 函数组件或客户 React 钩子函数。

我怀疑这是一个 useEffect 问题，但不确定它如何适合上述场景？

Answer 1

放const queryClient = useQueryClient();MyComponent 函数下，

并queryClient在重新加载函数中调用。

const MyComponent = () => {
   const queryClient = useQueryClient()
   var qKey = ['xyz', foo, bar];
   
   const reload = () => {
        queryClient.invalidateQueries(qKey)
   }

   const {isLoading, error, data, isFetching} = useQuery(qKey, async () => {
      /* stuff */
      return response.json()
    }, {keepPreviousData: true});

   return (
      <ActionsBar onRefresh={reload} onClear={foo} onSearch={bar}/>
      <Other stuff...>
   )
}