Все продукты исчезают со страницы после нажатия кнопки «Добавить в корзину» (сценарий Java) ⇐ Javascript

[Anonymous]

Я работаю над проектом, используя JavaScript. Без фреймворков. У меня есть код для добавления продукта в корзину, этот код работает, продукт добавляется в корзину. Но, нажав на кнопку, весь продукт исчезает со страницы, а также ссылки на корзину и выход на сайт. После обновления страницы продукт вместе со ссылками снова появляется. Я понимаю, что проблема в штате. Но я не понимаю, как это решить. Как сделать продукт не исчезнуть со страницы? < /P>
export class HomePage extends Component {
constructor() {
super();
this.template = template();
this.state = {
links: [
{
label: "Sign In",
href: ROUTES.singIn,
},
{
label: "My Cart",
href: ROUTES.singIn,
},
],

products: [],
orderCart: [],
};
}

setLinks = () => {
const { getUser } = useUserStore();
if (getUser()) {
this.setState({
links: [
{
label: "My Cart",
href: ROUTES.cart,
},
{
label: "LogOut",
href: ROUTES.logOut,
},
],
});
}
};

getProducts = () => {
apiService
.get("/products")
.then(({ data }) => {
this.setState({
...this.state,
products: mapResponseApiData(data),
});
})
};

addToCard = async ({ target }) => {

const btn = target.closest('.add-to-cart');
if (!btn) return;

const { id, price, name, img } = btn.dataset;
if (this.state.orderCart?.some(item => item.id === id)) {
useToastNotification({
message: 'This product is already in the cart.',
type: TOAST_TYPE.info });
return;
}

await apiService.patch(`/order/${id}`, { id, price, name, img });

this.setState(prev => ({ orderCart: [...(prev.orderCart || []), { id, price, name, img }] }));

useToastNotification({ message: 'Product in the cart!', type: TOAST_TYPE.success });

};

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

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

customElements.define('home-page', HomePage);
< /code>
Ранее я использовал другой код для добавления продуктов: < /p>
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),
});
})
useToastNotification({
message: "Product in the cart!",
type: TOAST_TYPE.success,
});
}
};
< /code>
Этот код сработал. Продукт не исчез со страницы, таких проблем не было. Но была проблема с добавлением идентификатора в хранилище продукта. Поэтому мне пришлось переделать этот код.
для хранения продукта я использую Firebase (RTDB). < /P>

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