Почему не берется id товара при удалении его с корзины?

Question

[luxurypluxury]

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

Но когда я перезагружаю страницу, всё нормально удаляется из бэка и из корзины на фронте.
В чём может быть дело?

Вот функция которая на onClick кнопки удаления товара с корзины повешена:

const onRemoveItem = (id) => {
    axios.delete(`https://(не смотри на мое апи).mockapi.io/cart/${id}`);
    setCartItems((prev) => prev.filter((item) => item.id !== id));
  }

Comments

[szQocks]

а где ты хранишь id, ты скинул функцию которая принимает id толку нам от неё, покажи где она вызывается и т.д

если ты хранишь товары корзины пользователя на бэке как ты написал, то в вопросе нет той логики когда ты их получаешь и когда ты вызываешь эту функцию

Answer 1

[Уалихан Оразбаев]

Но когда я перезагружаю страницу, всё нормально удаляется из бэка и из корзины на фронте.

Это очень странно что с бэка удаляется, поскольку ты отправляешь некорректный запрос, это можно понять по его URL, вместо id передается undefined. Я бы еще проверил, а добавляется ли товар вообще в БД на бэке

Вот функция которая на onClick кнопки удаления товара с корзины повешена:

Я бы рекомендовал улучшить эту функцию следующим образом:

const onRemoveItem = async (id) => {
    try {
        await axios.delete(`https://(не смотри на мое апи).mockapi.io/cart/${id}`);
        setCartItems((prev) => prev.filter((item) => item.id !== id));
    } catch (error) {
        /* уведомлять пользователя об ошибке или логировать ее как-нибудь */
    }
  }

Тем самым мы для начала ждем ответа сервера а потом уже в случае успешного ответа сервера, удаляем карточку товара на фронт.