Cauc-Query Crud作用的定制钩子

Question

我正在努力封装我的react-Query在自定义钩中订单的CRUD操作。首先，我已经封装了getallorders Opertion并运行良好，但是现在我试图使用getDetails来做同样的事情，并且我有此错误消息：

React Hook“ useQuery”在函数“顺序”中称为React函数组件，也不是自定义React Hook函数。 React组件名称必须以大写字母开头。 React Hook名称必须以“使用” React钩/钩规则

开始

因为它不是在组件或钩子上执行的，而是在钩子内部的函数内部执行的查询。

我不想将参数传递到钩子上，因为并非总是需要一个订单详细信息。

到目前为止，这是我的钩子：

const useOrders = () => {
  const session = useContext(Context);
  const token = session.storedValue.token;

  const orders = useQuery(["orders", token], () => {
    const result = getOrders(token);
    return result;
  });

  const order = (orderId) => {
    const query = useQuery(["order", token, orderId], () => {
      const result = getOrderDetails(token, orderId);
      return result;
    });

    return query;
  };

  return { orders, order };
};

我想将OrderID传递给order函数并获取查询。

Answer 1

当调用钩子时，它看起来像是2个单独的钩子

，有时您需要所有订单，有时您会搜索一个订单。使这两个不同的钩子根据需要使用

const useOrders = () => {
  const session = useContext(Context);
  const token = session.storedValue.token;

  const orders = useQuery(["orders", token], () => {
    const result = getOrders(token);
    return result;
  });
  return orders;
};

const useOrder = (orderId) => {
  const session = useContext(Context);
  const token = session.storedValue.token;
  const order = useQuery(["order", token, orderId], () => {
    const result = getOrderDetails(token, orderId);
    return result;
  });

  return order;
};