React Redux无法覆盖数组中相似对象的问题求助

云上老周

2026-8-15

解决React Redux数组中相似对象的count递增问题

核心逻辑思路

在Redux reducer中处理数组时，严格遵循不可变原则（不直接修改原数组/对象），针对相似属性对象做如下处理：

遍历现有数组，检查是否存在与新对象属性匹配的项
若存在，将该对象的count值在原基础上加1
若不存在，将新对象（count初始设为1）添加到数组中

示例Reducer代码

const initialState = {
  items: []
};

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_OR_UPDATE_ITEM':
      const targetItem = action.payload;
      // 这里以`id`作为相似属性判断依据，可根据实际业务替换为name/sku等
      const matchIndex = state.items.findIndex(item => item.id === targetItem.id);
      
      if (matchIndex !== -1) {
        // 存在相似对象，更新count
        const updatedItems = [...state.items];
        updatedItems[matchIndex] = {
          ...updatedItems[matchIndex],
          count: updatedItems[matchIndex].count + 1
        };
        return { ...state, items: updatedItems };
      } else {
        // 无相似对象，新增条目并初始化count为1
        return {
          ...state,
          items: [...state.items, { ...targetItem, count: 1 }]
        };
      }
    default:
      return state;
  }
};

export default itemReducer;