Блог

Главная - Вопросы по программированию - как удалить товар из корзины в react native с помощью redux

как удалить товар из корзины в react native с помощью redux

#react-native #redux #react-redux

Вопрос:

у меня возникают проблемы, когда я удаляю товары из корзины, корзина не удаляет товар из корзины, а вместо этого добавляет пустой товар

<

Это экран корзины

 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

Комментарии:

1. Не могли бы вы, пожалуйста, поделиться исходным состоянием редуктора?

2. Я считаю, что ваше заявление о возврате в части «REMOVE_FROM_CART» редуктора немного неверно. Я не уверен, как именно решить вашу проблему, но другие ваши инструкции return возвращают объекты, в то время как инструкция remove cart возвращает массив. Вы могли бы попробовать что-то вроде этого: return { ...state, cartItems: state.cartItems.filter(....)};

Ответ №1:

Глядя на код, который вы предоставили….Я думаю, что это единственная ошибка в вашем коде.

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

Комментарии:

1. я применил этот код, но в нем говорится, что неопределенный не является объектом (оценка «state.cartitems.filter») этот код появляется после нажатия кнопки «Удалить товар» в корзине

2. Не могли бы вы, пожалуйста, поделиться своим начальным состоянием редуктора. Я предположил, что у вас есть массив cartItems в вашем состоянии….если ваше состояние-это массив, который вы обновляете, то state.cartItems.filter его следует заменить state.filter .

Метки: