在打字稿和ReactQuery中，如何将道具传递给外部异步组件？

Question

我在下一步 我的行

  const { isLoading, data, error } = useQuery("products", getProducts(1));

GetProducts（1）） - ＆GT;我应该如何将道具传递给该组件？

页面：

import { useQuery } from "react-query";
import { getProducts } from "../components/task-1/getProducts-0";

export const ProductsPage = () => {
  const { isLoading, data, error } = useQuery("products", getProducts(1));

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!data || error) {
    return <div>Error#!</div>;
  }

  return <>...</>;
};

export default ProductsPage;

组件：

export const getProducts = async (id: number) => {
    const rest = await fetch(
        `https://fakestoreapi.com/products/${id}`
    );
    const data: ProductApi[] = await rest.json();
    return data;
};

interface ProductApi {
    id: number;
    title: string;
    price: number;
    description: string;
    category: string;
    image: string;
    rating: Rating;
}

interface Rating {
    rate: number;
    count: number;
}

Answer 1

您可以进一步解释问题是什么吗？目前尚不清楚出现了什么问题以及您期望发生什么

编辑：
我看到了问题。实际上，您正在调用getProducts useQuery。您应该将功能传递给usequery。
如果您想能够参数化函数，那么您应该创建所谓的关闭内容，例如：

const getProducts = (id: number) => {
    return async () => {
        const rest = await fetch(`https://fakestoreapi.com/products/${id}`);
        const data: ProductApi[] = await rest.json();
        return data;
    }
}

这里发生的事情是，我返回一个异步函数，当称为API时，该功能是函数，这就是函数我想传递到usequery

Answer 2

useQuery("products", getProducts(1))

此代码将在渲染过程中调用函数getProducts（1），而不是传递函数来Quart-Query-实际上，您将函数的结果传递给了React-Query。
大多数示例使用内联函数

useQuery("products", () => getProducts(1))

。

此外，ID理想情况下应该是Querykey的一部分，因为这是对此的依赖性：

const id = 1

useQuery(["products", id], () => getProducts(id))

如果您这样做，您还可以利用React-Query将Query键注入您传递的函数的事实它：

useQuery(["products", 1], ({ queryKey }) => getProducts(queryKey[1]))

最好的做法是唯一的具有您的查询功能取决于QueryKey内部的内容。