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

Question

实现表单时遇到了一个问题，作为select中使用的数据通过react-query从数据库中检索出来，只有在点击输入框时才应该被检索一次，后续的点击不应该导致重新获取数据。

如何以清洁的方式实现？

钩子：

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,
  });

- skelaw

---

你可以使用 const selectFetched = useRef(false)，在第一次获取后更新为 selectFetched.current = false; - 然后对每个后续的选择点击进行检查？ - John Detlefs

@JohnDetlefs 这个方法可能可行，但是表单中包含了几个需要符合问题描述的元素。我认为我会按照你所描述的方式来做。我正在赶截止日期，这似乎是一个不错的解决方案。 - skelaw

Answer 1

看起来你想要一个具有无限陈旧时间的懒查询：

const [enabled, setEnabled] = useState(false)

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

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

- TkDodo

Answer 2

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

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

当你第一次点击按钮时，可以更新状态

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

//function component
setbtnDisable(false)

- Dr. Bright

---

我非常确定disabled属性会使输入框或按钮无法被点击。 - skelaw

是的，你说得对，我想象了一个刷新按钮和一个提交按钮分开，我道歉。 - Dr. Bright