javascript - 如何在循环中有条件地调用 RTK 查询钩子(Hook)，尽管我们不能在 useEffect 中使用它

Question

useEffect(() => {
  const fetchServiceProducts = async () => {
    if (isSuccess === true && data) {
      for (let i = 0; i < data?.data.length; i++) {
        const serviceid = data.data[i].service_id;
        console.log(serviceid, "serviceid");
        const { data: serviceProduct } = await useServicedataByidQuery(serviceid).refetch();
        console.log(serviceProduct, "serviceata");
      }
    }
  };
  fetchServiceProducts();
}, []);

由于我们无法在回调中添加 RTKQ Hook ，因此如何才能实现这一点并在循环长度完成后调用我的查询并获取收集的数据？

Answer 1

您可能希望使用“惰性”版本的查询。这将返回一个可以随意调用的“触发”函数。请参阅useLazyQuery了解更多详情。

示例:

const [trigger] = useLazyServicedataByidQuery(/* query options */);

useEffect(() => {
  const fetchServiceProducts = async () => {
    if (isSuccess && data) {
      for (let i = 0; i < data?.data.length; i++) {
        const serviceId = data.data[i].service_id;
        console.log({ serviceId });

        const { data: serviceProduct } = await trigger(serviceId);
        console.log({ serviceProduct });
      }
    }
  };

  fetchServiceProducts();
}, []);