Как обновить количество товаров в корзине, не обновляя страницу? - PullRequest
Новая
       10

Как обновить количество товаров в корзине, не обновляя страницу?

1 голос
/ 19 июня 2020

Я работаю с React & Redux и пытаюсь реализовать корзину (это тестовый проект). Я получаю массив с товарами, который выглядит так: 

 products: [
        {
            name: "Product one",
            count: 1,
            price: 100,
        },
        {
            name: "Product two",
            count: 1,
            price: 200,
        },
    ]

В корзине я его отображаю. Есть возможность увеличить количество товаров и отобразить общую сумму в зависимости от того, сколько единиц товара вы выбрали. Например, 2 единицы товаров стоимостью 100, сбоку будет всего 200. Но поскольку я работаю с LocalStorage, сумма изменится только после того, как я обновлю sh страницу. Как исправить эту ошибку? Если требуется более подробная информация, просьба сообщить.

Ковш 

            <div className="bucket">
                    {this.props.products.map((value,index)=>{
                        return(
                            <div className="product">
                                <h3>{value.price}</h3>
                                <div className="count">
                                    <input type="number" value={value.count} onChange={this.props.handleChange}/>
                                    <button onClick={()=>this.props.increase(value,this.props.products)}>+</button>
                                </div>
                                <h3>{value.price*value.count}</h3>
                            </div>
                        )
                    })}
            </div>
function mapStateToProps(state){
    return{
        products: state.Stack.products,
    }
}

function mapDispatchToProps(dispatch){
    return{
        handleChange: (value)=>dispatch(handleChange(value)),
        increase: (product,products)=>dispatch(increase(product,products)),
    }
}

Действие 

export function increase(product,products){
    return(dispatch)=>{
        products.map((value)=>{
            if(value == product){
                value.count ++;
            }
        })
        dispatch(newProducts(products));
    }
}



export function newProducts(products){
    return{
        type: NEW_PRODUCTS,
        products
    }
}

Редуктор 

const initialState ={
 products: [
        {
            name: "Product one",
            count: 1,
            price: 100,
        },
        {
            name: "Product two",
            count: 1,
            price: 200,
        },
    ]
}

export default function (state = initialState, action){
    switch(action.type){
        case HANDLE_CHANGE:
            return{
                ...state, value: action.value.target.value
            }
        case NEW_PRODUCTS:
            return{
                ...state, products: action.products
            }
        default:
            return state
    }
}

Спасибо!

1 Ответ

2 голосов
/ 19 июня 2020

, когда вы создаете новый продукт, я думаю, будет лучше, если вы добавите его к существующему массиву продуктов

вместо того, чтобы иметь его как 

        case NEW_PRODUCTS:
            return{
                ...state, products: action.products
            }

как насчет того, чтобы вы попробовали 

        case NEW_PRODUCTS:
            return{
                ...state, products: [...state.products, action.products]
            }

, и если action.products является массивом, содержащим более одного продукта, обязательно используйте оператор распространения, чтобы убедиться, что вы нажимаете каждый продукт индивидуально

, в этом случае строка products: [...state.products, action.products] изменится на products: [...state.products, ...action.products]

Пожалуйста, дайте мне знать, если это ответит на ваш вопрос.

...