После удаления товара из корзины, ошибка с функцией карты, которая отображает оставшиеся товары в корзине

Question

Я создаю базовый сайт электронной коммерции с помощью React.У меня возникла проблема при удалении товара из корзины.Он корректно удаляется на серверной части, но мой компонент не выполнит повторную визуализацию правильно, чтобы показать оставшиеся элементы.

Вот основной процесс: моя корзина запускается на экспресс-сессии как пустой массив, и когдакто-то добавляет товар в корзину, там есть пост, который проходит через лексем.Данные отправляются в конец, а затем возвращаются в приставку, чтобы сидеть в массиве корзины в редукторе:

export function addToCart(product, total) {
return {
type: ADD_TO_CART,
payload: axios.post("/api/cart", product, total)
};
}

export function getCart(cart) {
return {
type: GET_CART,
payload: cart
}; 
}

У меня есть компонент "Bag", который использует функцию getCart (из redux) для выполнения Getзапрос, а затем отображает все элементы.Каждый элемент является собственным компонентом, отображаемым с помощью реквизита из компонента Bag.Вот моя функция карты в компоненте Bag:

render() {

let bagList;
bagList =
  this.props.cart[0] &&
  this.props.cart[0].map(element => {
    return (
      <BagItem
        element={element}
        id={element.id}
        key={`${element.id}`}
        name={element.name}
        image={element.image}
        size={element.size}
        price={element.price}
        sleeves={element.sleeves}
        fabric={element.fabric}
        length={element.length}
        deleteItem={this.deleteItem}
      />
    );
  });

Затем в ответ я возвращаю «bagList», который отображает каждый компонент BagItem со всей информацией о каждом элементе.

return (
  <div>
    <StoreNav />
    <div className="header-bar-container">
      <div className="header-bar">
        <div className="size">Size</div>
        <div className="price">Price</div>
        <div className="remove">Remove</div>
      </div>
    </div>
    {this.props.cart[0] && bagList}

    <p>Subtotal</p>
  </div>
);
}
}

(Мне сказали, что использование оператора && для условного рендеринга вещей в реакции - это способ помочь программе узнать, что она должна фактически выполнять функцию карты, поскольку элемент есть. Я не слишком ясенпочему это сделано, но у меня это работает очень много, поэтому я делаю это здесь).

Функция карты отлично работает с первого раза, когда я нажимаю ссылку, чтобы увидеть, что в корзине,Когда я нахожусь в корзине, есть кнопка удаления, чтобы удалить каждый элемент.Функция удаления происходит из компонента Bag, и я отправляю ее в виде реквизита через атрибуты карты в компонент BagItem:

deleteItem = id => {
axios
  .delete(`/api/cart/remove-item/${id}`)
  .then(res => {
    this.props.updateCart(res.data);
    this.props.getCart();
    console.log(this.props.cart);
  })
  .catch(() => {});
alert("Item has been deleted");
 };

Я использую функцию updateCart (из redux), чтобы убедиться, что корзина вИзбыток обновляется после удаления.Затем я снова использую функцию getCart, чтобы получить обновленную корзину.

Кажется, все это работает, кроме функции карты.Во второй раз, когда у меня есть обновленная корзина, компонент Bag не будет повторно отображаться, и он просто выдаст мне эту ошибку:

TypeError: this.props.cart [0] .map не являетсяfunction

Я зарегистрировал корзину в консоли при рендеринге компонента Bag, и я вижу, что элемент был успешно удален из массива cart.Проблема в том, что элементы не будут отображаться.

Я не понимаю, почему это работает первый раз, а не второй.Это проблема с моей функцией карты?Я был бы очень признателен за любую помощь в этом вопросе.Спасибо!