[英]React update array state in Redux
我對React和Redux很陌生。 我設法用以下內容更新數組中的現有項目
case ACTION_TYPES.SET_PREPARATION_ITEM:
const { id, x, y, rotation } = action.payload;
const currentPreparationItem = state.entity.preparationItems[id];
currentPreparationItem.x = x;
currentPreparationItem.y = y;
currentPreparationItem.rotation = rotation;
return { ...state, preparationItems: { ...state.entity.preparationItems } };
現在,我嘗試使用以下代碼將新項目添加到數組中
case ACTION_TYPES.ADD_PREPARATION_ITEM:
const implant: IProductMySuffix = action.payload;
const preparationItem: IPreparationItemMySuffix = {};
preparationItem.x = 10;
preparationItem.y = 10;
preparationItem.productId = implant.id;
preparationItem.image = implant.image;
preparationItem.imageContentType = implant.imageContentType;
const result = { ...state, preparationItems: { ...state.entity.preparationItems.concat(preparationItem) } }
return result;
如果我正確調試,則result
const將具有一個包含一項的數組。 但是,在render方法中,似乎無法檢測到數組是否包含任何元素。 知道是什么原因造成的嗎?
添加了我的組件的一部分
const mapStateToProps = (storeState: IRootState) => ({
users: storeState.userManagement.users,
customers: storeState.customer.entities,
businesses: storeState.business.entities,
products: storeState.product.entities,
preparationEntity: storeState.preparation.entity,
loading: storeState.preparation.loading,
updating: storeState.preparation.updating,
updateSuccess: storeState.preparation.updateSuccess
});
const mapDispatchToProps = {
getUsers,
getCustomers,
getBusinesses,
getEntity,
getProducts,
updateEntity,
setBlob,
createEntity,
reset,
setPreparationItem,
addPreparationItem
};
首先,您要改變狀態,這違反了redux的規則
case ACTION_TYPES.SET_PREPARATION_ITEM:
const { id, x, y, rotation } = action.payload;
const currentPreparationItem = {...state.entity.preparationItems[id]}; // create a new object instance
currentPreparationItem.x = x;
currentPreparationItem.y = y;
currentPreparationItem.rotation = rotation;
const entity = state.entity ? {...state.entity} : {};
const preparationItems = entity.preparationItems ? [...entity.preparationItems] : [] // Create a new Array instance
preparationItems[id] = currentPreparationItem;
entity.preparationItems = preparationItems;
return {
...state,
entity
};
第二:您將preparationItems
作為對象傳播,但實際上是一個數組(根據您的問題描述)
case ACTION_TYPES.ADD_PREPARATION_ITEM:
const implant: IProductMySuffix = action.payload;
const preparationItem: IPreparationItemMySuffix = {};
preparationItem.x = 10;
preparationItem.y = 10;
preparationItem.productId = implant.id;
preparationItem.image = implant.image;
preparationItem.imageContentType = implant.imageContentType;
const entity = state.entity ? {...state.entity} : {};
// Create a new Array instance and add the new object at the end
entity.preparationItems = entity.preparationItems ? [
...entity.preparationItems,
preparationItem
] : [preparationItem];
const result = {
...state,
entity
}
return result;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.