MERN+Redux开发CRM时从MongoDB取项目阶段数据遇payload不可迭代错误

报错原因 #

该报错触发的核心是stageReducer.js第11行执行[...action.payload]展开运算时，action.payload不是可迭代的数组类型，甚至为undefined，无法执行迭代操作。

常见触发场景：

• 后端返回数据结构和前端取值逻辑不匹配：你在action中取值为response.data.stages，但如果后端接口返回的阶段列表直接是数组、没有嵌套在stages字段下，response.data.stages就会是undefined。
• 接口请求通路异常：前端请求/stages路径错误、跨域、代理配置失效，导致请求返回404/500错误响应，响应体中没有对应stages字段。
• 200状态码下返回非数组数据：接口请求成功但后端返回的stages字段是对象、null等非数组类型，同样无法展开。

解决方法 #

1. 确认并修正数据取值逻辑 #

在stageAction中先打印完整响应数据，确认结构后修正取值：

export const getStages = () => async dispatch =>{
    try{
        const response = await axios.get('/stages');
        // 新增打印查看返回结构
        console.log('接口返回数据：', response.data);
        // 如果打印结果显示response.data本身就是阶段数组，将payload改为response.data即可
        dispatch({
            type: GET_STAGES,
            payload: response.data.stages ?? response.data
        });
    }catch(err){
        console.log('getStages api error:', err);
    }
}

2. 给reducer添加类型兜底 #

避免非数组数据传入时报错，修改reducer逻辑：

case GET_STAGES:
    return{
        stages: Array.isArray(action.payload) ? [...action.payload] : []
    };

3. 排查接口请求通路 #

打开浏览器开发者工具的「网络」面板，查看/stages请求的状态码、响应体是否和Postman测试结果一致，如果存在跨域、路径错误、代理失效问题，先修正前端请求配置或后端接口配置。

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