Как найти значение объекта в массиве?

Question

[Rubical]

При каждом клике на кнопку на определенной карточке в состояние записывается объект с данными данной карточки, чтобы на основании их отрисовать данный товар в корзине. Как сделать, чтобы если id карточки на которую происходит клик, уже есть у какого-либо из объектов в состоянии, то данная карточка не будет добавляться в корзину, а вместо этого counter будет изменяться как текущий counter + counter ивент таргета?


Крутил код, но никак не получается:

const addCartItem = (item) => {
  window.addEventListener("click", function (event) {
    if (event.target.hasAttribute("data-cart")) {
      const targetEl = event.target.closest(".col-md-6");

      if (
        cartItem &&
        cartItem.find(
          (item) =>
            item.id === targetEl.querySelector("[data-counter]").textContent
        )
      ) {
        setCartItem({
          ...cartItem,
          count: cartItem.count,
        });
        console.log(
          parseInt(targetEl.querySelector("[data-counter]").textContent)
        );
      } else {
        setCartItem([
          ...cartItem,
          {
            id: targetEl.querySelector(".card").getAttribute("data-id"),
            imgSrc: targetEl.querySelector("img").getAttribute("src"),
            name: targetEl.querySelector(".item-title").textContent,
            amount: targetEl.querySelector("[data-items-in-box]").textContent,
            weight: targetEl.querySelector(".price__weight").textContent,
            counter: targetEl.querySelector("[data-counter]").textContent,
            price: targetEl.querySelector(".price__currency").textContent,
          },
        ]);
      }
    }
  });
};

Comments

[HardBot]

Тебя в гугле заблокировали или что?

[Михаил Р.]

Крутил код, но никак не получается.

Покажите чего накрутили.

[Rubical]

Михаил Р., накрутил того, что ничего не работает)) P.s учусь только 4 мес, поэтому сильно не закидывайте палками
const addCartItem = (item) => {
window.addEventListener("click", function (event) {
if (event.target.hasAttribute("data-cart")) {
const targetEl = event.target.closest(".col-md-6");

if (
cartItem &&
cartItem.find(
(item) =>
item.id === targetEl.querySelector("[data-counter]").textContent
)
) {
setCartItem({
...cartItem,
count: cartItem.count,
});
console.log(
parseInt(targetEl.querySelector("[data-counter]").textContent)
);
} else {
setCartItem([
...cartItem,
{
id: targetEl.querySelector(".card").getAttribute("data-id"),
imgSrc: targetEl.querySelector("img").getAttribute("src"),
name: targetEl.querySelector(".item-title").textContent,
amount: targetEl.querySelector("[data-items-in-box]").textContent,
weight: targetEl.querySelector(".price__weight").textContent,
counter: targetEl.querySelector("[data-counter]").textContent,
price: targetEl.querySelector(".price__currency").textContent,
},
]);
}
}
});
};

[Dima Polos]

забудьте про работу с DOM в реакте!!! при клике на элемент смотрите его id, далее в корзине фильтром или методом find ищите такой айтем, если нет - добавляйте, меняйте стейт, а если есть - плюсуйте, про дом клозест ивент листенер классы забудьте реакт не про это, ооооочень редко когда такое в реакте надо

[Rubical]

Dima Polos, ок, спасибо

[Модератор]

Rubical,
Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

[Михаил Р.]

Rubical,

накрутил того, что ничего не работает)) P.s учусь только 4 мес, поэтому сильно не закидывайте палками

Я спрашивал не для того, чтобы Вас "закидать палками", а для того, чтобы определить, думать ли над Вашей проблемой, или отправить Вас на фриланс (если Вы самостоятельно не пробовали решить свою проблему).

Скорее всего, Вашу проблему не решат здесь, т.к. Вы не предоставили код Вашего приложения, а гадать можно до бесконечности.

[Maksimka]

если правильно понял, то объекты в массив записываются? можно писать в обьект, типа такого:

products = {
  byId: { 
    [productId1]: { ...productData },
    [productId2]: { ...productData },
    ...
  },
  ids: [productId1, productId2, ...]
}

массив `ids` нужен чтоб порядок элементов сохранить, если нужно это в корзине

добавлять так примерно будет

if (!products.byId[productId]) {
    products.byId[productId] = {
      ...product, count: 1,
    }

   products.ids.push(productId) // сохраняем позицию на момент добалвения
} else {
   products.byId[productId].count += 1 // увеличили счетчик
}

чтоб потом пройтись по элементам используем массив id

products.ids.forEach(id => {  // forEach для примера просто
  const product = products.byId[id]
  // чего то делаем с товаром
})

вроде правильно понял что надо, но вообще я бы подход изменил вообще...

[Rubical]

Maksimka, спасибо! а как бы вы сделали, изменив подход?

[Maksimka]

Rubical, я бы хранил справочник с товарами, как вариант в объекте как выше, его бы использовал и для каталога и для корзины. для того, чтоб передать данные в корзину я бы туда просто id как то передавал и количество, не вижу смысла гонять туда сюда объекты, но тут может и не подойдет такое, раз данные из верстки берутся

Answer 1

[Алексей Мельников]

Добрый день!

Не знаю структуру объекта, но по-моему Вы сравниваете id с counter

item.id === targetEl.querySelector("[data-counter]")

Если я прав - мог бы выглядеть примерно так:

if (
        cartItem &&
        cartItem.find(
          (item) =>
            item.id === 'здесь нужен id'
        )
      ) {
        setCartItem((prev) => {
          ...cartItem,
          count: cartItem.count, // или возможно  count: prev.count++ ?
        });
        console.log(
          parseInt(targetEl.querySelector("[data-counter]").textContent)
        );
      } else {...