如何在Redux中过滤更新数据仅展示status_id为1的活跃条目

AI 小北

2026-10-4

Redux 数据过滤实现方案

原代码存在的问题

变量作用域错误：List 定义在 getCategories 异步函数外部，无法获取请求返回的 response 变量，会触发未定义报错
语法拼写错误：数组过滤方法是 filter，原代码误写为 fliter
函数未执行：dispatch 时直接传入 filerActiveList 函数引用，没有拿到实际的过滤结果数组
逻辑绑定错误：过滤逻辑没有和每次请求返回的最新数据绑定，无法动态适配数据更新

修正后代码

你可以直接在拿到排序后的数据时同步完成过滤，不需要额外定义外部变量，实现如下：

export const getCategories = () => {
  return async (dispatch) => {
    try {
      const response = await CategoriesService.invoke();
      const payload = response?.payload;
      // 排序 + 空值兜底，避免接口无返回时报错
      const sortedList = sort(payload?.data || [], getComparator('asc', 'category_type'));
      // 过滤仅保留 status_id 为1的活跃条目
      const activeList = sortedList.filter(item => item.status_id === "1");
      // 若不需要保留全量排序数据，直接将data赋值为activeList即可；若需要保留全量可新增字段存储
      dispatch(updateCatgories({...payload, data: activeList, sortedFullList: sortedList }));
    } catch (error) {
      logger.error('Error getting categories Service from API', error);
    }
  };
};

可复用优化方案

如果后续多处需要用到活跃条目过滤逻辑，可以抽离为通用工具函数：

// 通用过滤工具函数，接收原始列表返回活跃列表
const filterActiveList = (list = []) => {
  return list.filter(item => item.status_id === "1");
}

// 异步逻辑中调用
const activeList = filterActiveList(sortedList);