Redux中fetchBookData返回undefined致读取books属性报错求助

问题原因分析 #

1. Redux Store未注册bookList reducer：如果store配置时未将bookListSlice.reducer加入合并的reducers中，state.bookList会是undefined，访问state.bookList.books必然触发错误。
2. Loading状态逻辑错误：useEffect中dispatch是异步操作，直接在其后调用setLoading(false)会导致loading状态提前结束，若数据未返回且reducer未正确初始化，会引发渲染异常。
3. 分页数据处理错误：使用concat会持续追加新分页数据，导致列表重复累加，不符合分页需求。

解决方案步骤 #

1. 修复Redux Store配置 #

确保store已正确注册bookList reducer，假设你的store配置文件为store.js，修改如下：

import { configureStore } from '@reduxjs/toolkit';
import bookListReducer from './service/bookList/bookListSlice'; // 路径根据实际项目调整

export const store = configureStore({
  reducer: {
    bookList: bookListReducer, // 必须添加此行，确保state.bookList存在
    // 其他reducer...
  },
});

2. 改用Redux管理Loading与Error状态 #

移除组件内自行维护的loading和error状态，直接从Redux获取：

• 先更新bookListSlice.js的初始状态：

const initialState = {
  books: [],
  error: "",
  status: 'idle', // 新增状态：idle/loading/succeeded/failed
};

• 在HomePage.js中替换状态获取逻辑：

// 移除以下自行定义的状态
// const [loading, setLoading] = useState(false);
// const [errorMessage, setErrorMessage] = useState("");

// 从Redux获取状态
const { books: bookData, status, error } = useSelector((state) => state.bookList);

• 渲染时使用Redux的status判断加载状态：

{status === 'loading' ? (
  <Box sx={{ textAlign: "center", color: "primary.main" }}>
    <ClipLoader color="inherit" size={150} loading={true} />
  </Box>
) : (
  // 书籍列表渲染逻辑
)}

• 错误提示替换为Redux中的error：

{error && <Alert severity="danger">{error}</Alert>}

3. 修正分页数据赋值逻辑 #

在bookListSlice.js的异步请求成功回调中，将数据追加改为直接赋值（分页仅需当前页数据）：

.addCase(fetchBookData.fulfilled, (state, action) => {
  state.status = "succeeded";
  state.books = action.payload; // 替换concat为直接赋值
})

4. 验证apiService与json-server配置 #

• 确保apiService已配置正确的json-server基础地址：

// apiService.js示例
import axios from 'axios';

const apiService = axios.create({
  baseURL: 'http://localhost:3001', // 对应json-server启动地址，按需修改
});

export default apiService;

• 确认json-server已正常启动，命令示例：

json-server --watch server/db.json --port 3001

• 检查server/db.json中books数组格式正确：

{
  "books": [
    { "id": 1, "title": "示例书籍", "imageLink": "images/book1.jpg" },
    // 其他书籍数据
  ]
}

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