[英]React update array state in Redux
I am quite new with React and Redux. 我对React和Redux很陌生。 I manage to update existing item within an array with the following
我设法用以下内容更新数组中的现有项目
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 } };
Now I am trying to add new item into the array with the following code 现在,我尝试使用以下代码将新项目添加到数组中
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;
If I debug correctly, result
const will have an array with one item. 如果我正确调试,则
result
const将具有一个包含一项的数组。 However the in the render method it does not seem to detect if the array has any elements. 但是,在render方法中,似乎无法检测到数组是否包含任何元素。 Any idea what might cause this ?
知道是什么原因造成的吗?
Added portion of my components 添加了我的组件的一部分
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
};
First of all, you're mutating the state, which is against redux's rules 首先,您要改变状态,这违反了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
};
Second: you're spreading preparationItems
as an object, but it's actually an array (based on your question description) 第二:您将
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.