使用useQuery调用POST接口无法获取数据的技术咨询

1. 修复Axios请求的headers配置位置 #

你当前把headers放在了POST请求的**请求体（data）**中，这是错误的。Axios的post方法参数格式为axios.post(url, data, config)，headers属于第三个参数config的一部分，而非请求体内容。

修改后的API代码：

export const getPostApi = async (
  params: IGridParams,
  inputs: Array<string>,
): Promise<IGridResponse<IData>> => {
  const { limit, page, query, order } = params;
  return AxiosClient.post(
    `${backendUi}/postGetApi?order=${order || 'DESC'}&page=${page}&take=${limit}${query && `&keyword=${query}`}`,
    {
      filters: [
        {
          field: 'inputs',
          value: inputs
        },
      ],
    },
    {
      headers: {
        Authorization: 'Bearer ' + sessionStorage.getItem(TOKEN_COOKIE_EM),
      },
    }
  )
    .then(({ data }) => {
      console.log(data);
      return data;
    })
    .catch((error) => {
      // 优化错误信息，便于排查
      throw new Error(error.response?.data?.message || error.message || '数据请求失败');
    });
};

2. 完善React Query的查询键（Query Key） #

React Query通过查询键识别不同的请求，你的查询键未包含inputs参数，导致inputs变化时不会触发重新请求，且缓存逻辑会出错。需要将inputs加入查询键：

修改后的自定义钩子代码：

export const useGetPostApi = (
  limit: number,
  page: number,
  query: string,
  inputs: Array<string>,
) => {
  const params: IGridParams = { limit, page, query };
  return useQuery(
    // 将inputs加入查询键，确保参数变化时触发更新
    [REACT_QUERY_KEYS.getPost, limit, page, query, inputs],
    () => getPostApi(params, inputs),
    { enabled: inputs.length > 0 },
  );
};

3. 组件中正确解构并检查状态 #

在组件调用钩子时，务必解构data、error、isLoading等状态，便于排查问题：

const { data, isLoading, error } = useGetPostApi(yourLimit, yourPage, yourQuery, yourInputs);

// 调试时可打印错误信息
if (error) {
  console.error('请求错误:', error.message);
}

额外注意事项 #

• 确保sessionStorage.getItem(TOKEN_COOKIE_EM)能正确获取到有效的token，避免因权限问题导致后端返回异常。
• 如果inputs是频繁变化的数组，可使用useMemo包裹以保持引用稳定，避免不必要的请求触发：

  const memoizedInputs = useMemo(() => [...inputs], [inputs]);
  const { data } = useGetPostApi(limit, page, query, memoizedInputs);
  

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