reactjs 动态调用并行React查询,但数据返回未定义

xyhw6mcr  于 2023-02-22  发布在  React
关注(0)|答案(1)|浏览(114)

我正在尝试使用react-query中的useQueries钩子调用一个数组中可用的数字empCode的雇员数据。
我已应用axiosinstance调用函数getEmployeeData,其中我将返回res.data。然后,我应用useQueries钩子进行动态API调用,当我运行console. log(www.example.com)时,API调用成功,结果显示在控制台中。res.data) the result is showing in console.
当我尝试从empQueries中获取数据时,因为它在react.useEffect中返回结果数据数组,数据返回时未定义。

const getEmployeeData = async (empCode: string) => {
let URL = `/api/hcm/employee/getempautofill?Rows=100&PageNo=1&EmpCode=${empCode}`;
const TOKEN = localStorage.getItem("token");

axiosInstance({
  method: "get",
  baseURL: process.env.REACT_APP_HRMS_API_URL,
  url: URL,
  headers: {
    Authorization: `Bearer ${TOKEN}`,
    "api-version": "V1.0",
    "Accept-Language": "en-US",
  },
})
  .then((res: any) => {
    if (res.data.Status !== false) {
      console.log("returned emp data", res.data); 
      return res.data;
    }
  })
  .catch((err: any) => {
    console.log("error employee data", err);
  });

};
这是empCode的数组

const empData = ["EMP4991", "EMP4992"];

这是useQueries函数

const empQueries = useQueries(
//todo check multiple api call
empData.map((emp) => {
  return {
    queryKey: ["emp", emp],
    queryFn: () => getEmployeeData(emp),
  };
 })
);

  React.useEffect(() => {
  debugger;
  empQueries
   .filter((query) => query.isSuccess)
   .map((query) => console.log("data is: ", query.data)); // this return undefined but 
         // i want here to return the res.data
  }, [empQueries]);

帮帮我,我是不是做错了什么?有没有语法错误?

e5nszbig

e5nszbig1#

您的getEmployeeData函数标记为async,但axioInstance未使用await。您应该尝试类似以下操作:

const getEmployeeData = async (empCode: string) => {
    let URL = `/api/hcm/employee/getempautofill?Rows=100&PageNo=1&EmpCode=${empCode}`;
    const TOKEN = localStorage.getItem('token');

    try {
        const res = await axiosInstance({
            method: 'get',
            baseURL: process.env.REACT_APP_HRMS_API_URL,
            url: URL,
            headers: {
                Authorization: `Bearer ${TOKEN}`,
                'api-version': 'V1.0',
                'Accept-Language': 'en-US'
            }
        });
        if (res.data.Status !== false) {
            return res.data;
        }
    } catch (err) {
        console.log('error employee data', err);
    }
};

此外,请确保res.data.Status实际返回true,否则即使上面的更改也无法解决您的问题。

相关问题