Redux实现无限滚动时分页数据合并出现嵌套数组如何解决？

开发者阿泽

2026-9-27

问题根因

你遇到的二维数组嵌套问题和逻辑错误主要来自三个地方：

数据拼接时没有展开新页的帖子列表：后端返回的data.data才是当前页的帖子数组，你直接将完整返回对象拼入旧数组，且没有展开新数组，导致整组新数据被当成单个数组元素塞入旧列表。
载荷结构不一致：你在页码为1时派发的payload是后端返回的完整结构（包含data、currentPage等字段），非1页时派发的是纯数组，导致reducer读取字段逻辑混乱。
状态更新逻辑位置错误：Redux的状态变更逻辑应该聚合在reducer中，在action里直接读取全局store拼接数据的写法不符合单向数据流规范，也不易维护。

正确实现方案

第一步：简化action逻辑

不需要在action中做拼接判断，统一传递后端返回的完整数据即可，推荐使用redux-thunk自带的getState参数获取状态，避免直接引入全局store：

export const getPosts = (page) => async (dispatch, getState) => {
  try {
    dispatch({ type: START_LOADING });
    const { data } = await api.fetchPosts(
      page,
      getState().auth.user?._id
    );
    dispatch({
      type: GET_POSTS,
      payload: { ...data, currentPage: page }
    });
    dispatch({ type: END_LOADING });
  } catch (error) {
    console.log(error);
  }
};

第二步：修改reducer的状态更新逻辑

在reducer中根据页码判断是覆盖旧列表还是追加新数据，注意要展开新页的帖子数组：

case GET_POSTS:
  return {
    ...state,
    posts: payload.currentPage === 1 
      ? payload.data 
      : [...state.posts, ...payload.data],
    currentPage: payload.currentPage,
    numberOfPages: payload.numberOfPages,
    post: {},
  };