Question

ItemListComponent

此组件呈现一个项目列表，每个项目都是具有唯一itemId属性的对象。用户可以通过按加号图标将商品添加到购物车。

<FlatList
    data={items}
    keyExtractor={item => item.itemId}
    renderItem={({ item }) => (
        <ListItem
            title={item.name}
            rightIcon={
                <Icon
                    name={'add'}
                    onPress={ () => {this.addItem(item)} }
                />
            }
        />
    )}
/>

addItem(item) {
    item.cartItemId = shortId.generate(); /* Add a unique ID to each cart item */
    this.props.addItemToCart(item);
}

在后台，这将更新redux cart状态。购物车项目在CheckoutComponent中呈现。

CheckoutComponent

<View style={styles.container}>
    <FlatList
        data={this.props.cart.items}
        keyExtractor={(item) => item.cartItemId} /* Use the unique ID added above */
        renderItem={({ item }) => (
            <ListItem
                title={item.name}
            />
        )}
    />
</View>

由于用户可能将例如item1两次添加到其购物车中，因此该购物车随时可能包含重复的商品。

例如

cart = [
    { itemId: 'item1'},
    { itemId: 'item1'}
]

为了避免在 CheckoutComponent 中进行键重复渲染错误，我将一个新的唯一cartItemId属性添加到item对象（添加到购物车时）。理想的结果：

cart = [
    { itemId: 'item1', cartItemid: 'randId1' },
    { itemId: 'item1', cartItemid: 'randId2'}
]

但是，这不能防止密钥重复问题。

cartReducer

const initialState = {
    items: [] 
};

export default state = (state = initialState, action) => {
    switch(action.type) {
        case actions.ADD_CART_ITEM:
            return newCart = {
                ...state,
                items: [action.payload, ...state.items]
            };
        ...
    }
}

以下内容导致一些奇怪的行为。

第1步：用户将item1添加到购物车：

cart = [ {itemId: 'item1', cartItemId: 'randId1' } ]

第2步：用户将另一个item1添加到购物车。

预期结果：

cart = [
    {itemId: 'item1', cartItemId: 'randId1' },
    {itemId: 'item1', cartItemId: 'randId2' }
]

实际结果：

cart = [
    {itemId: 'item1', cartItemId: 'randId2' },
    {itemId: 'item1', cartItemId: 'randId2' }
]

新添加的对象的cartItemId属性将覆盖购物车中所有其他cartItemId实例的item1属性。这会导致 CheckoutComponent

中的键重复错误：

“警告：遇到两个具有相同密钥的孩子。randId2 ...”

问题

我要去哪里错了，怎么办？

将商品添加到购物车而不改变状态？
使用 CheckoutComponent 的keyExtractor中的cartItemId吗？（我不想使用索引）

[Reducer]：将对象添加到对象数组似乎会导致属性覆盖

0 个答案: