Redux Toolkit数据获取失败：accidents数组为空求助

问题现象 #

• accidents数组始终为空，页面显示<h3>您暂无事故记录</h3>
• 执行console.log(accidents._id)返回undefined

核心错误排查 #

1. Redux Slice状态赋值错误 #

在accidentSlice的getAccidents.fulfilled处理逻辑中，错误地将接口返回数据赋值给了state.goals，但你的状态定义里存储事故数据的字段是accidents：

.addCase(getAccidents.fulfilled, (state, action) => {
  state.isLoading = false;
  state.isSuccess = true;
  state.goals = action.payload; // 此处应为state.accidents = action.payload
})

这个错误会导致接口返回的事故数据完全没有存入目标状态，页面自然读取不到任何数据。

2. 数组属性访问错误 #

accidents是一个数组，你直接访问accidents._id不符合逻辑——数组本身没有_id属性，因此返回undefined。正确的做法是遍历数组后访问单个元素的_id，就像你在JSX渲染中做的那样：

// 错误写法
console.log(accidents._id);

// 正确示例（查看第一个元素的_id）
console.log(accidents[0]?._id);

其他验证建议 #

• 确认API返回格式：检查/api/home/allAccidents接口是否返回数组格式的数据，可以在accidentService的getAccidents方法中打印response.data，验证数据结构是否符合预期。
• Redux状态校验：使用Redux DevTools查看accident状态下的accidents字段，确认接口请求完成后是否被正确更新。
• 优化useEffect依赖：getAccidents是createAsyncThunk生成的稳定引用，useEffect的依赖数组只需保留dispatch，避免不必要的重复请求：

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

修复后的关键代码片段 #

Slice中修正状态赋值 #

.addCase(getAccidents.fulfilled, (state, action) => {
  state.isLoading = false;
  state.isSuccess = true;
  state.accidents = action.payload; // 修正为目标字段accidents
})

View中修正控制台打印 #

// 打印整个数组查看完整数据
console.log(accidents);
// 或安全访问第一个元素的_id
console.log(accidents[0]?._id);

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