Реализация «AddToCard» в проекте электронной коммерции React.js - PullRequest
Новая
       24

Реализация «AddToCard» в проекте электронной коммерции React.js

2 голосов
/ 09 июня 2019

enter image description hereenter image description here Я занимаюсь созданием сайта электронной коммерции. У меня возникла проблема после добавления товаров в корзину покупок. Я успешно добавляю товары на карту, но проблема в том, что, когда я нажимаю кнопку «Продолжить покупки», я перехожу на страницу товаров, однако товары не отображаются должным образом, как раньше.

Я прикрепил картинки: Когда я нажимаю на кнопку корзины, открывается модал, когда я нажимаю «продолжить покупки», я получаю другой экран и получаю эту ошибку в консоли: 

index.js:1375 Warning: Failed prop type: Invalid prop `product` of type `array` supplied to `Product`, expected `object`.
    in Product (at ProductList.js:42)
    in div (at ProductList.js:38)
    in div (at ProductList.js:34)
    in section (at ProductList.js:33)
    in ProductList (created by Context.Consumer)
    in Route (at App.js:20)
    in Switch (at App.js:19)
    in App (at src/index.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:11)
    in ProductProvider (at src/index.js:10)
console.<computed> @ index.js:1375
index.js:1375 Warning: Each child in a list should have a unique "key" prop. See /react-warning-keys for more information.
    in div (at ProductList.js:38)
    in div (at ProductList.js:34)
    in section (at ProductList.js:33)
    in ProductList (created by Context.Consumer)
    in Route (at App.js:20)
    in Switch (at App.js:19)
    in App (at src/index.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:11)
    in ProductProvider (at src/index.js:10)
console.<computed> @ index.js:1375
index.js:1375 Warning: Each child in a list should have a unique "key" prop. See react-warning-keys for more information.
    in div (at ProductList.js:38)
    in div (at ProductList.js:34)
    in section (at ProductList.js:33)
    in ProductList (created by Context.Consumer)
    in Route (at App.js:22)
    in Switch (at App.js:19)
    in App (at src/index.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:11)
    in ProductProvider (at src/index.js:10)
console.<computed> @ index.js:1375

Я не смог найти ни одного связанного вопроса или проекта в Интернете. Это мой первый большой проект React, и я надеюсь, что найду решение здесь.

Context.js 

getItem = id => {
    const product = this.state.products.find(item => item.id === id);
    return product;
 };
addToCart = id => {
const tempProducts = [...this.state.products];
const index = tempProducts.indexOf(this.getItem(id));
const product = tempProducts[index];
product.inCart = true;
product.count = 1;
const price = product.price;
product.total = price;
this.setState(
  () => {
    return {
      products: [tempProducts],
      cart: [...this.state.cart, product],
      detailProduct: { ...product }
    };
  },
  () => this.addTotals()
);
};

Я считаю, что проблема заключается в выборе элемента и изменении метода "addToCart". Я знаю, что если мне нужно изменить элемент в списке, я должен также специально найти его индекс, иначе элементы не будут отображаться правильно, как сейчас.

...