如何在循环中条件调用RTK Query钩子（规避useEffect使用限制）

你原来的代码错误在于在useEffect的异步回调中调用了RTK Query的useServicedataByidQuery钩子——React钩子必须遵循规则，只能在组件或自定义钩子的顶层调用，不能嵌套在循环、条件或异步函数内部。

下面给出两种可行的解决方案：

方案一：用useLazyQuery手动触发查询 #

useLazyQuery是RTK Query专门用来手动触发查询的钩子，它返回一个可在回调里调用的触发函数，完美适配你的场景。

串行执行查询（按顺序逐个请求） #

如果业务要求必须按顺序处理每个请求，可以用串行循环：

import { useLazyQuery } from '@reduxjs/toolkit/query/react';
// 替换为你的API切片路径
import { useServicedataByidQuery } from './your-api-slice';

// 必须在组件顶层调用useLazyQuery
const [fetchServiceDataById] = useLazyQuery(useServicedataByidQuery.endpoint);

useEffect(() => {
  const fetchServiceProducts = async () => {
    if (isSuccess && data) {
      const allServiceProducts = [];
      for (const item of data.data) {
        const serviceId = item.service_id;
        // 发起请求并获取数据
        const serviceProduct = await fetchServiceDataById(serviceId).unwrap();
        allServiceProducts.push(serviceProduct);
      }
      // 循环结束，allServiceProducts就是所有返回的数据
      console.log('所有服务产品数据:', allServiceProducts);
    }
  };
  fetchServiceProducts();
}, [isSuccess, data, fetchServiceDataById]);

并行执行查询（同时发起所有请求，效率更高） #

如果不需要按顺序，推荐用Promise.all并行发起请求，大幅提升性能：

import { useLazyQuery } from '@reduxjs/toolkit/query/react';
import { useServicedataByidQuery } from './your-api-slice';

const [fetchServiceDataById] = useLazyQuery(useServicedataByidQuery.endpoint);

useEffect(() => {
  const fetchServiceProducts = async () => {
    if (isSuccess && data) {
      // 生成所有请求的Promise数组
      const requestPromises = data.data.map(item => 
        fetchServiceDataById(item.service_id).unwrap()
      );
      // 等待所有请求完成，一次性拿到所有结果
      const allServiceProducts = await Promise.all(requestPromises);
      console.log('所有服务产品数据:', allServiceProducts);
    }
  };
  fetchServiceProducts();
}, [isSuccess, data, fetchServiceDataById]);

方案二：直接调用API实例的端点方法 #

如果不需要RTK Query的缓存、状态管理等特性，也可以直接用API切片生成的实例来发起请求：

// 替换为你的API实例路径
import { api } from './your-api-slice';

useEffect(() => {
  const fetchServiceProducts = async () => {
    if (isSuccess && data) {
      const requestPromises = data.data.map(item => 
        api.endpoints.servicedataByid.initiate(item.service_id).unwrap()
      );
      const allServiceProducts = await Promise.all(requestPromises);
      console.log('所有服务产品数据:', allServiceProducts);
    }
  };
  fetchServiceProducts();
}, [isSuccess, data, api]);

注意事项 #

• unwrap()方法用来获取请求的实际数据，同时会抛出请求错误，你可以根据需求添加try/catch处理异常。
• 并行查询的性能远优于串行，除非有必须按顺序执行的业务逻辑。
• 确保useEffect的依赖数组包含所有用到的变量，避免闭包问题或不必要的重复请求。

内容的提问来源于stack exchange，提问作者Vasim Shaikh