react-native - 如何使用redux从购物车中删除商品

Question

当我从购物车中移除商品时，我遇到了挑战，购物车并未从购物车中移除商品，而是添加了一个空白商品

<

这是购物车屏幕

ScrollView>
       {this.props.cartItems.map((item, index) => {
          return (
            <Menu key={index} style={{ padding: 0.5 }}>
              <MenuImage source={item.image}/>
                <MenuInfor>
                  <Text dark bold>{item.name}</Text>
                  <Text dark small>{item.info}</Text>
                  <Text dark bold>${item.price}</Text>
                </MenuInfor>
              <TouchableOpacity
                onPress={() => this.props.removeItem(item.id)}            
                style={{alignItems: 'flex-end', justifyContent: 'flex-end', alignSelf: 'flex-end'}}
              >
                <AntDesign name="minuscircleo" size={30} color="#000" />
              </TouchableOpacity>
            </Menu>
                )
            })}
      </ScrollView>

以下是我的 action.js 文件

 const addToCart = (id, count) => (
  {
    type: 'ADD_TO_CART',
    payload:{
      id,
      count,
    }

  }
);

// removeFromCart
const removeFromCart = (id) => (
  {
    type: 'REMOVE_FROM_CART',
    id,
    count,
  }
);

以下是我的 reducer.js 文件

const cartItems = (state = [], action) => {
    switch (action.type) {
        case 'ADD_TO_CART':{
            return [...state, action.payload ]            
          }
        case 'REMOVE_FROM_CART':    
             
        return [...state, state.filter(cartItem => cartItem.id !== action.payload.id)]
        
        case 'CLEAR_CART':
        return {
        ...state,
        cartItems: ['']
        }
      }
    return state
}
export default cartItems

Answer 1

查看您提供的代码....我认为这是您的代码中唯一的错误。

case 'REMOVE_FROM_CART':   
   return {
        ...state,
        cartItems: state.cartItems.filter((cartItem) => cartItem.id != 
        action.payload.id)
      };