Redux状态始终返回初始值求助：vendorItemSelect无法累加元素

我在Redux store中创建了vendorItemSelect状态，初始值为空数组。另有一个vendorTable组件通过connect函数连接到store。

勾选复选框时，我会dispatch一个action更新状态，将新的行数据对象推入数组，此时Redux状态会更新为新状态。但勾选另一个复选框时，本该从store获取包含已添加对象的状态后再推入新对象，最终数组应包含两个对象，可实际Redux状态始终返回空数组，每次仅更新为当前的新行数据。

相关代码 #

分发Action的代码 #

let items = updateItems(selectedItem, row.original);
dispatch(setVendorListItem(items));

组件接收props代码 #

export const VendorsItemTable = ({ onSubmit , defaultRfqSelected, selectedItem, ReceivedRFQs }) => {

MapStateToProps代码 #

const mapStateToProps = (state) => {
  return {
    defaultRfqSelected: state.rfq.selectedRow,
    ReceivedRFQs: state.rfq.RFQList,
    selectedItem: state.rfq.vendorItemSelect,
  };
};

Reducer代码 #

const initialState = {
    selectedRow: 0,
    RFQList: [],
    selectRFQROW: {},
    quoteSent: '',
    vendorItemSelect: [],
    vendorSelect:[],
};


export const RFQReducer = (state = initialState, action) => {
    switch(action.type) {
        case 'RowSelection' :   return {
            ...state,
            selectedRow: action.payload,
        };
        case 'RFQList' : return {
            ...state,
            RFQList: action.payload,
        }
        case 'RFQQuote' : return {
            ...state,
            quoteSent: action.payload,
        }
        case 'RFQVendor': return {
            ...state,
            vendorSelect: action.payload,
        }
        case 'RFQVendorItem': return{
            ...state,
            vendorItemSelect : action.payload,
        }
        default:
            return state
       
    }
}

RFQActions代码 #

export function UpdateRowSelection  (data)  {
  return {
    type: 'RowSelection',
    payload: data
  }
}

export function SetRFQRowList ( data) {
  return {
    type: 'RFQList',
    payload: data
  }
}

export function setVendorListItem (data) {
  return{
    type: 'RFQVendorItem',
    payload: data
  }
}

export function setVendorName (data) {
  return{
    type: 'RFQVendor',
    payload: data
  }
}

状态截图 #

核心问题 #

你的updateItems函数未正确基于现有selectedItem（即store中的vendorItemSelect数组）更新，每次仅生成包含当前行数据的新数组，导致Reducer接收的payload是单个项而非累积的数组，最终状态被覆盖。

解决步骤 #

1. 修正updateItems函数逻辑：确保基于现有数组添加/移除项，且返回新数组（遵循Redux不可变原则）：

   // 示例：切换选中状态（存在则移除，不存在则添加）
   const updateItems = (currentItems, newItem) => {
     // 假设每个项有唯一标识（如id）
     const isExists = currentItems.some(item => item.id === newItem.id);
     if (isExists) {
       return currentItems.filter(item => item.id !== newItem.id);
     } else {
       return [...currentItems, newItem];
     }
   };
   

   注意：禁止使用push/splice等修改原数组的方法，必须返回新数组实例。

2. 确认组件获取最新状态：检查selectedItem props是否随store状态更新而同步，确保调用updateItems时传入的是最新的数组，而非初始空数组。

3. 验证dispatch参数：确认updateItems返回的是包含所有已选中项的数组，而非仅当前项。

内容的提问来源于stack exchange，提问作者jai sai Kiran