求助：Node/Express接口数据无法在React组件中正常显示

核心问题1：异步请求未正确等待，导致payload为undefined #

在fetchData action函数中，axios请求没有添加await，此时res是未resolved的Promise对象，而非接口响应结果，res.data自然是undefined。dispatch后reducer返回undefined，触发控制台报错：

Uncaught (in promise) Error: When called with an action of type "fetch_data", the slice reducer for key "safety" returned undefined.

修复代码：

export const fetchData = () => async (dispatch) => {
    const res = await axios('/api/safety'); // 添加await等待请求完成
    dispatch({ type: FETCH_DATA, payload: res.data });
};

核心问题2：Reducer初始状态不合理，导致map操作报错 #

safetyReducer的初始状态设为null，而组件中CarDetails会对data执行map操作。当数据未加载完成或加载失败时，null.map()就会触发页面报错：

Uncaught runtime error: can not read properties of null (reading 'map').

修复代码：

import { FETCH_DATA } from '../actions/types';
function safetyReducer(state = [], action) { // 将初始状态从null改为空数组
    switch (action.type) {
        case FETCH_DATA:
            return action.payload;
        default:
            return state;
    }
}

export default safetyReducer;

额外优化建议 #

为了提升用户体验，可在组件中添加加载状态判断：

// Cars.js组件中修改return部分
return (
    <div>
        Cars
        {data.length ? <CarDetails data={data} /> : <div>数据加载中...</div>}
    </div>
);

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