React中useEffect获取数据失败，Postman测试接口正常

根据你的代码和描述，以下是几个关键的排查和解决步骤：

1. 修正Redux State的选取路径（最可能的核心问题） #

你的authSlice定义的状态是挂载在Redux Store的auth分支下的，但当前代码中直接从根state取state.complaints和state.user，这会导致初始渲染时这两个值都是undefined，进而触发map函数报错。

修改useSelector的选取逻辑：

const complaints = useSelector((state) => state.auth.complaints);
const { role } = useSelector((state) => state.auth.user);

确认你的Store配置是否正确挂载了authReducer，示例配置如下：

import { configureStore } from '@reduxjs/toolkit';
import authReducer from './state';

export const store = configureStore({
  reducer: {
    auth: authReducer, // 必须将authSlice的reducer挂载到auth键下
  },
});

2. 为Fetch请求增加错误处理 #

即使Postman测试正常，前端仍可能遇到网络错误或接口返回非预期格式的情况，导致data不是数组，最终使complaints变为非数组类型。修改getComplaints函数：

const getComplaints = async () => {
    try {
        const response = await fetch("http://localhost:3001/student/complaints", {
            method: "GET",
        });
        if (!response.ok) {
            throw new Error(`请求失败：${response.status}`);
        }
        const data = await response.json();
        console.log("接口返回数据：", data); // 确认返回的data是数组格式
        dispatch(setComplaints({ complaints: data }));
    } catch (error) {
        console.error("获取投诉数据失败：", error);
        // 出错时设置空数组，避免渲染报错
        dispatch(setComplaints({ complaints: [] }));
    }
};

3. 增加渲染时的空值保护 #

在组件渲染阶段，为complaints增加空值兜底，避免因中间状态异常导致报错：

{(complaints || []).map(
    ({
        _id,
        fullName,
        email,
        hostel,
        room,
        description,
        picturePath,
        upvotes,
        downvotes,
        resolved,
    }) => (
        <Complaint
            key={_id}
            complaintId={_id}
            fullName={fullName}
            hostel={hostel}
            room={room}
            description={description}
            picturePath={picturePath}
            upvotes={upvotes}
            downvotes={downvotes}
            resolved={resolved}
            isAdmin={isAdmin}
        />
    )
)}

按照以上步骤排查，优先解决Redux State路径的问题，这是导致你当前报错的最直接原因。

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