如何按指定name筛选响应数据并存入Redux状态

需求说明 #

给定如下结构的响应数据：

{
  data: [
    {name:"abc",age:"10",id:"10"},
    {name:"abc",age:"15",id:"20"},
    {name:"def",age:"15",id:"20"}
  ],
  name: "abc"
}

需要从data数组中筛选出所有name字段与顶层name值一致的对象，最终生成以该name为键的对象，预期结果：

{
  abc: [
    {name:"abc",age:"10",id:"10"},
    {name:"abc",age:"15",id:"20"}
  ]
}

原代码的问题 #

你写的代码存在几个问题：

• 用map方法不合适：map是用来转换数组每个元素，筛选元素应该用filter方法
• 条件判断错误：data.name是无效的，顶层name是响应对象的属性，不是data数组的属性
• 返回逻辑错误：return name[o]完全不符合需求，应该直接收集匹配的对象

正确实现方法 #

基础写法 #

// 假设响应数据存储在response变量中
const response = {
  data: [
    {name:"abc",age:"10",id:"10"},
    {name:"abc",age:"15",id:"20"},
    {name:"def",age:"15",id:"20"}
  ],
  name: "abc"
};

// 筛选出匹配name的对象
const filteredItems = response.data.filter(item => item.name === response.name);
// 构建目标结构，用计算属性名动态设置键
const result = {
  [response.name]: filteredItems
};

console.log(result);

简化写法 #

可以把逻辑合并成一行：

const result = { [response.name]: response.data.filter(item => item.name === response.name) };

Redux Reducer中的处理示例 #

如果是在Redux reducer中处理该数据并存入状态，参考如下代码：

const initialState = {};

const myReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SAVE_FILTERED_DATA': {
      const { data, name } = action.payload;
      // 筛选匹配的对象
      const filteredData = data.filter(item => item.name === name);
      // 更新状态，保留原有状态的同时添加新的筛选结果
      return {
        ...state,
        [name]: filteredData
      };
    }
    default:
      return state;
  }
};

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