小编Tir*_*isu的帖子

我正在使用 React Query 从 React 应用程序中的 API 获取数据。我想实现去抖以获得更好的性能，但我无法让它与 useQuery 一起使用。当我尝试将 API 调用包装在去抖函数中时，收到一条错误消息“查询函数必须返回定义的值”。

这是我当前使用的代码：

    async function fetchProducts() {
        const response = await axios.get(`/api/products?category_id=${category_id}&${searchParams.toString()}&page=${page}`);
        return response.data;
    }

    const debouncedFetchProducts = React.useMemo(
        () => _.debounce(fetchProducts, 500),
        [fetchProducts]
    );

    // The following queries will execute in parallel
    const categoryQuery = useQuery({ queryKey: ['category'], queryFn: fetchCategory, keepPreviousData: true });
    const productsQuery = useQuery({ queryKey: ['products', category_id, sortPrice, minPrice, maxPrice, page, categoryFilters], queryFn: debouncedFetchProducts, keepPreviousData: true, staleTime: 1000 });

当我运行它时，我收到一条错误消息“查询函数必须返回定义的值”。我相信这是因为 debounced 函数返回一个承诺，但 useQuery 需要一个实际值。

我也尝试过使用 useAsync，但我想使用 …