Я работаю над проектом, используя 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
