如何仅在第一次点击时通过 react-query 获取数据，然后在后续点击时禁用重新获取

Question

我在实现数据中使用的表单时遇到问题，通过反应查询从数据库中检索， 应该只单击输入时检索一次，后续单击不应导致重新获取。

如何以干净的方式做到这一点？

挂钩：

export const useUnitOfMeasureSelectData = ({
  queryPageIndex,
  queryPageSize,
  queryFilters,
  enabled,
  refetchOnWindowFocus,
}) => {
  return useQuery(
    ["unitofmeasure-list", queryPageIndex, queryPageSize, queryFilters],
    () => fetchItemData(queryPageIndex, queryPageSize, queryFilters),
    {
      keepPreviousData: true,
      staleTime: 60000,
      enabled,
      refetchOnWindowFocus,
      select: (data) => {
        const categories = data.data.results.map((obj) => ({
          value: obj.id,
          label: obj.name,
        }));
        return categories;
      },
    }
  );
};

在组件调用中 onClick={()=>refetch()} 每次点击都重新获取数据。

  const {
    data: unitOfMeasureSelectData = [],
    refetch: refetchUnitOfMeasureSelectData,
  } = useUnitOfMeasureSelectData({
    queryPageIndex: queryPageIndex,
    queryPageSize: queryPageSize,
    queryFilters: filterString,
    enabled: false,
    refetchOnWindowFocus: false,
  });

Answer 1

react/native 中的按钮有一个属性 disabled，您可以在完成后将其设置为 false。可能的方法是使用 state

<button disabled={this.state.btnDisable}/>

然后你可以在第一次点击按钮时更新状态

//class component
this.setState({btnDisable: false})

//function component
setbtnDisable(false)

Answer 2

看起来您想要一个具有无限陈旧时间的惰性查询：

const [enabled, setEnabled] = useState(false)

useQuery(key, fn, { enabled, staleTime: Infinity })

然后，当你点击输入时，你调用setEnabled: true。无限的陈旧时间确保查询始终被认为是新鲜的，因此不会再发生后台重新获取。

如何仅在第一次点击时通过 react-query 获取数据，然后在后续点击时禁用重新获取

How to fetch data only on first click via react-query and then disable refetch on subsequent clicks

javascript

reactjs

axios

react-query