При добавлении элемента в корзину в 10% случаев мой предмет не определен ⇐ Javascript

[Anonymous]

Я делаю проект, используя Vite и JS. У меня есть компонент домашней страницы, где у меня есть код, чтобы добавить продукт в корзину. Этот код работает, но в 10% случаев, в хромированной консоли, мой продукт не определен и не добавляется в корзину. В чем может быть проблема? Спасибо! < /P>
Хромированная консоль < /p>
export class HomePage extends Component {
constructor() {
super();
this.template = template();
this.state = {

orderCart: [],
};
}

addToCard = (e) => {
if (e.target.closest(".add-to-cart")) {
let price = e.target.parentElement.parentElement.dataset.price;
let name = e.target.parentElement.parentElement.parentElement.dataset.name;
let img = e.target.parentElement.parentElement.parentElement.dataset.img;

const cartItems = { price, name, img };
apiService.post("/order", cartItems).then(() => {
this.setState({
...this.state,
orderCart: this.state.orderCart?.concat(cartItems),
});
console.log(cartItems);
})
}
};

componentDidMount() {
this.addEventListener("click", this.addToCard);

}

componentWillUnmount() {
this.removeEventListener("click", this.addToCard);
}
}

customElements.define('home-page', HomePage);
< /code>
Для сетевого запроса я использую Axios API.
для хранения данных Я использую Firebase (база данных и хранение в реальном времени).
Product (я использую ручки для HTML): < /p>
{{#each products}}



{{this.name}}

{{this.price}}









{{/each}}
< /code>
Я думал, что проблема может быть с кнопкой добавить в корзину. Я попробовал это ID, но продукт все еще не определен после нескольких попыток.


Подробнее здесь: https://stackoverflow.com/questions/797 ... -undefined