React Query中mutation的onSuccess无法获取返回数据怎么办？

你的问题核心是onSuccess回调中拿到的data为undefined，可以从以下几个方向排查和解决：

1. 核对后端返回的数据结构 #

addMonth函数最终返回data.month，但如果后端接口的响应体里不存在month字段，或者字段名拼写不符合（比如写成Month/months），就会导致返回undefined。

先在addMonth函数中打印完整响应数据，确认结构是否符合预期：

async function addMonth(newMonth, user) {
  if (!newMonth) return null;
  const { data } = await axiosInstance.post(
    '/months',
    { newMonth },
    { headers: getJWTHeader(user) }
  );
  console.log('后端完整响应:', data); // 新增打印
  return data.month;
}

如果后端直接返回月度对象（而非嵌套在month属性内），则修改返回值为return data;即可。

2. 确认mutation调用时传入了有效参数 #

如果调用addNewMonth时没有传入合法的newMonthData，addMonth会返回null，虽然这不是undefined，但也会影响后续流程。检查调用代码：

// 确保传入了结构正确的月度数据
addNewMonth({ name: '2024年8月', amount: 1000 });

3. 排查axios请求是否真的成功 #

即使请求看上去“成功”，也可能存在HTTP状态码异常（比如204 No Content），或者axios拦截器修改了响应数据。给请求添加错误捕获，确认请求状态：

async function addMonth(newMonth, user) {
  if (!newMonth) return null;
  try {
    const { data, status } = await axiosInstance.post(
      '/months',
      { newMonth },
      { headers: getJWTHeader(user) }
    );
    console.log('响应状态码:', status);
    console.log('响应数据:', data);
    return data.month;
  } catch (err) {
    console.error('请求失败:', err);
    throw err; // 抛出错误让React Query的onError处理
  }
}

如果请求实际失败但未被正确抛出，mutation可能不会触发onError，反而返回undefined。

4. 临时调试辅助 #

如果暂时定位不到问题，可以扩展onSuccess的打印信息，确认更多细节：

onSuccess: (data, variables, context) => {
  console.log('返回数据:', data);
  console.log('传入mutation的参数:', variables);
  console.log('mutation上下文:', context);
  ProcessHistory(data);
}

通过variables确认传入的参数是否正确，通过data确认返回值的来源。

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