Как добавить объект в массив при первом клике и обновлять одно из его значений при каждом последующем клике - PullRequest
Новая
       50

Как добавить объект в массив при первом клике и обновлять одно из его значений при каждом последующем клике

0 голосов
/ 07 ноября 2019

Редактировать:

Мои извинения, песочница с кодом теперь работает, вам просто нужно нажать на один из пунктов, и он перенесет вас на страницу продукта http://codesandbox.io/s/mystifying-roentgen-7mp0t

Яя работаю над корзиной реагирования, и я пытаюсь выполнить следующие действия на основе массива, который я представлю после объяснения своих проблем:

1) Я пытаюсь проверить, соответствует ли размер, который запрашивает клиент,доступно.

2) Если оно недоступно, я хочу запустить функцию, которая будет:

2A) Добавить выбранный объект в массив.

2B) На каждомпоследующим нажатием кнопки я хочу обновить запас, чтобы убедиться, что он предупреждает клиента о том, что товара больше нет на складе, и я хочу увеличить новый элемент, который я хочу назвать «количеством», на единицу.

3) Это мой текущий массив размеров: 

[ 0: size: 3 stock: 140
_id: "5d903adb01cdab06932b5566"

1: size: 3.5 stock: 130
_id: "5d903adb01cdab06932b5565"

2: size: 4 stock: 10
_id: "5d903adb01cdab06932b5564"

3: {_id: "5d903adb01cdab06932b5563",  size: 4.5,  stock: 30}

4: size: 5 stock: 53
_id: "5d903adb01cdab06932b5562" ]

4) Это функции, которые я выполняю:

onClick = {() => this.alertBox (prod, arr, item)} 

alertBox = (product, products, count) => {
        console.log(count)
        let newStock;
        let clickedSize;
        let selectedProduct;

        if (product.stock === 0) { 
            alert('The item is currently out of stock')
        } else {
            newStock = product.stock -= 1;  
            clickedSize = product.size;
            selectedProduct = product._id;
            let newProducts;
            let quantity = 0;

            products.map((item) => {
                return item._id === product._id ? 
                    newProducts = [...this.state.chosenSize , {...item, ...newStock }]
                    : product
            });
            const tester = [];
            const result = [];
            const newSize = [];
            let quantities = [];
            let items;
            let newIt;

            newProducts.forEach(function(el) {
                if (tester.indexOf(el._id) === -1) {
                    tester.push(el._id)
                    result.push(el)
                    items = {...el}
                }
            });

            let newArray = result.map((item, i) => Object.assign({}, item, item.stock -= 1));

            this.setState(prevState => ({
                chosenSize: newArray
            }))

        }
    }

и

onClick = {() => this.onUpdateItem (idx, arr, prod)} 

onUpdateItem = (i, product, prod) => { 
       let newProd = product.stock;
           this.setState({
            chosenSize: product.map(el => (el._id === prod._id ? Object.assign({}, el, el.stock -= 1) : el))
     }); 

    };

7) Я хочу, чтобы объект обновлялся до чего-то подобного после каждого клика.

3: {_id: "5d903adb01cdab06932b5563", размер: 4.5, запас: 30, количество: 1}

до

3: {_id: "5d903adb01cdab06932b5563", размер: 4.5, запас: 29,количество: 2}

до

3: {_id: "5d903adb01cdab06932b5563", размер: 4.5, запас: 28, количество: 3}

Этопесочница для этого проекта, хотя по какой-то причине он больше не рендерит мои компоненты. Код находится в файле ProductPage codesandbox.io / s / mystifying-roentgen-7mp0t .

Любая помощь будет высоко ценится!

1 Ответ

1 голос
/ 07 ноября 2019

Вы должны использовать import { Link } from "react-router-dom";, чтобы Link работал в Product.js. Я только что внес изменения в песочницу кода

...