Redux状态总是返回初始状态

knsnq2tg  于 2023-10-19  发布在  其他
关注(0)|答案(1)|浏览(108)

我在redux商店中创建了一个名为“VendorItemSelect”的状态。它是用空数组初始化的。我有一个名为vendorTable的组件,我使用connect函数连接到商店。
在勾选复选框时,我将删除一个要存储的操作以更新我的状态。这会将一个新对象(行)推入我的数组中,并使用新的状态更新redux状态。
在选中另一个复选框时,它应该从存储中返回状态,其中包含通过dispacthing操作添加的新对象,并且它应该推送一个新对象。现在,它应该包含两个对象的数组。
但是redux state总是返回空数组,并且state总是用新行更新。我在这里粘贴一些代码和截图:

我要调度操作的代码:

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

从redux store获取 prop :

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

MapStateToProps:

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

我的减速器:

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:

导出函数UpdateRowSelection(data){ return { type:“RowSelection”,有效负载:数据} }
导出函数SetRFQRowList(data){ return { type:“RFQList”,有效负载:数据} }
函数setVendorListItem(data){ return{ type:“RFQVendorItem”,有效负载:数据} }
函数setVendorName(data){ return{ type:'RFQVendor',payload:数据} }
[

b1payxdu

b1payxdu1#

操作setVendorListItem也应该更新vendorItemSelect数组,但它只更新selectedItem变量。
要纠正这一点,请将reducer中RFQVendorItem的大小写改为:

case 'RFQVendorItem': return {
    ...state,
    vendorItemSelect: [...state.vendorItemSelect, action.payload],
};

这样,一个新的行将被添加到vendorItemSelect数组中。
此外,您必须确认选中复选框的组件是从中分派setVendorListItem操作的组件。
那么:
1.修改reducer的RFQVendorItem大小写以匹配上面的代码。
1.查看选中复选框的组件是否是分派setVendorListItem操作的组件。

相关问题