React生产构建中Promise返回undefined但本地正常的原因排查

我有一个基于Redux和Axios搭建的React项目，本地运行完全正常，但构建部署到服务器后，Chrome和Firefox里调用Redux异步Action时会返回undefined，导致无法读取data属性报错，只有Edge能正常运行。

相关代码 #

Redux Action代码 #

export const getCSEfirstStageApplicants = () => async (dispatch) => {
  try {
    dispatch(LOADING());

    const response = await axios.get(
      `${baseUrl}/Franchisee/CSEFirstStageApplication`
    );

    if (response.status === 200) {
      const { message, data } = response?.data || {};
      return { message, data };
    }
  } catch (error) {
    const { message } = error?.response?.data || {};
    return message;
  } finally {
    dispatch(STOP_LOADING());
  }
};

组件代码 #

import { useState, useEffect } from "react";
import {getCSEfirstStageApplicants} from "../../../redux/user/actions";
import { useDispatch } from "react-redux";

const MyComponent = () => {
  const [cseApplicants, setCseApplicants] = useState([]);
  const dispatch = useDispatch();
  
  const getFirstStage = async () => {
    const response = await dispatch(getCSEfirstStageApplicants());
    if (response && response.data) {
      console.log(response);
      setCseApplicants(response.data);
      return;
    }
    setCseApplicants([]);
  };

  useEffect(() => {
    getFirstStage();
  }, [dispatch]);
}

已排查情况 #

• 排除了预检请求顺序问题（确认XHR请求在预检之后）
• 曾出现asyncgenerator错误，但暂未找到与当前问题的关联

问题原因及解决方案 #

核心问题：Action返回逻辑存在未覆盖分支 #

你的Action有两个场景会默认返回undefined：

1. 接口返回状态码不是200时，try块内没有任何返回值，函数默认返回undefined
2. 生产环境下构建压缩可能导致异步函数的返回值处理出现边界异常

修复步骤： #

1. 完善Action的返回逻辑，覆盖所有分支

确保所有代码路径都有明确返回值，避免默认返回undefined：

export const getCSEfirstStageApplicants = () => async (dispatch) => {
  try {
    dispatch(LOADING());

    const response = await axios.get(
      `${baseUrl}/Franchisee/CSEFirstStageApplication`
    );

    // 扩展成功状态码范围，覆盖所有2xx状态
    if (response.status >= 200 && response.status < 300) {
      const { message, data } = response?.data || {};
      return { success: true, message, data };
    } else {
      // 处理非2xx的异常状态码
      const errMsg = response?.data?.message || '请求失败';
      return { success: false, message: errMsg };
    }
  } catch (error) {
    // 覆盖所有错误场景，包括网络异常、无响应体等
    const message = error?.response?.data?.message || error.message || '网络请求异常';
    return { success: false, message };
  } finally {
    dispatch(STOP_LOADING());
  }
};

2. 组件中优化响应处理逻辑

基于新的返回结构，更稳健地处理结果：

const getFirstStage = async () => {
  const response = await dispatch(getCSEfirstStageApplicants());
  // 先判断请求是否成功，再处理数据
  if (response?.success) {
    setCseApplicants(response.data || []);
  } else {
    console.error('获取申请人数据失败:', response?.message);
    setCseApplicants([]);
  }
};

3. 检查生产环境构建配置

如果使用Create React App，确保package.json中NODE_ENV为production时，没有修改Axios或Redux的默认行为；若使用自定义构建工具（如Webpack），可检查Terser压缩配置，禁用pure_getters等可能影响异步函数返回值的选项。

4. 补充生产环境日志

添加日志方便定位具体错误：

// 在Action的catch块中添加
console.error('接口请求错误详情:', error);
// 在组件的错误处理中添加
console.error('数据处理错误详情:', response);

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