Redux状态未正确呈现

Question

屏幕A->平面列表-->卡A->QtyButton组件

屏幕B->平面列表-->卡B->QtyButton组件

屏幕C->平面列表-->卡片C->QtyButton组件

我在平面列表中传递数组，在卡片中传递产品对象，然后在QtyButton组件中传递该对象的数量。数量显示在加号和减号按钮之间。

从QtyButton组件，我正在根据redux中的id更新产品对象的数量。在Redux，状态会更新。我不会直接在QtyButton中检索数量但是用这种方式获取数量
Flatlist --> card --> QtyButton

但我面临着一些奇怪的问题。

屏幕A->平面列表-->卡A->QtyButton组件Qty doesn't update on run time. If it does its very slow and sluggish render

屏幕B->平面列表-->卡A->QtyButton组件Same Screen A scenario

屏幕C->平面列表-->卡A->QtyButton组件If products are more than two then quantity starts to render slowly.

这里是还原剂

Cart = [];

export default (state = Cart, action) => {
const {type, payload, error} = action;
switch (type) {
case ACTION_TYPES.CART:
let cartItems = [...state.Cart];
// Check if product already exist in cart
if (cartItems.some(x => x.product_id === 
payload.item.product_id)) {
cartItems.map(item =>
item.product_id === payload.item.product_id
? {...item, quantity: item.quantity + 1}
: item,
);
} else {
cartItems.push({...payload.item, quantity: 1});
}
return {...state, Cart: cartItems};
case ACTION_TYPES.REMOVE_FROM_CART:
return {
...state,
Cart: state.Cart.filter(x => x.product_id !== payload.id),
};
case ACTION_TYPES.INCREMENT:
return {
...state,
Cart: state.Cart.map(x =>
x.product_id === payload.id
? {...x, quantity: x.quantity + payload.quantity}
: x,
),
};
case ACTION_TYPES.DECREMENT:
return {
...state,
Cart: state.Cart.map(x =>
x.product_id === payload.id
? {...x, quantity: x.quantity - payload.quantity}
: x,
),
};
default:
return state;

}

Answer 1

所以我解决了这个问题。

我正在更新嵌套组件(QtyButton(中的数量，而在屏幕A和屏幕B中，我没有将更新的数量从redux存储设置为API数组。

因为最初，我在平面列表中显示Api数组中的数量，一直到QtyButton组件。

调用api从状态中的API获取数据

在设置状态之后，我需要将redux存储的更新数量设置为API状态。这将检查redux中的数量，并且无论存储在redux中什么数量都将被设置为API数组。

let cart = props.cart;
for (let i = 0; i < apiState.length; i++) {
for (let j = 0; j < cart.length; j++) {
if (apiState[i].id === cart [j].id) {
apiState[i].quantity = cart [j].quantity;
}
}
}
And then in render function
Flatlist
data={apiState}
//remaining flatlist stuff
/>

现在我有了最新的数量。