Как создать на React корзину?

Question

[Дима Минчев]

Так как начинаю изучать React, хотелось бы понять как работает тут счетчик, и как написать правильно, что бы при нажатие "кнопки +" или "Кнопки -" увечить или уменьшить цену, ну и конечно же при нажатии кнопки Добавить в корзину > переходило на другую страницу, где сохранялось состояние цены, как это реализовать

Answer 1

[Даниил Кочкин]

Вообще, вопрос вы задали достаточно интересный. Однако проблема в том, что ответ на него достаточно массивный, если конечно отвечать полностью.

Потому, к сожалению, придётся немного сократить.

Представим, у вас есть небольшой магазин, где присутствует несколько товаров. Например, это будут простые телефоны. Структура одного товара довольно простая: картинка, название, описание и кнопка купить.
Под капотом всё обстоит немного иначе. У нас будет массив, внутри которого есть объекты с данными. В объект будет входить: название продукта, описание продукта, картинка на продукт и уникальный идентификатор. Пример одного объекта будет немного ниже.

{
  id: 0,
  name: "Nokia 3310",
  description: "Телефон, переживший падение в жерло вулкана",
  url: "https://static.shiftdelete.net/wp-content/uploads/2018/05/nokia-3310-1-milyon-volt-yuke-dayandi-sdn-01.jpg",
  price: 2800
}

Поскольку React приложения являются одностраничными, потому-то и называются SPA, что в переводе на нормальный “single page application”. У нас будет несколько страниц: первая страница с продуктами, где можно приобрести какой-то товар, а вторая страница — это простая корзина.

Думаю, с роутингом проблем не должно возникнуть. Однако, если те возникнут, можете посмотреть это видео. На английском, на русском.

Теперь определимся.

При нажатии на кнопку «Купить» должно произойти действие. Продукт, который мы купили должен попасть в корзину, а при переключении на страницу корзины показываться на странице. Возникает вопрос, как это сделать?

Ответ довольно простой: создать пустой массив, в который мы и будем скандировать все купленные продукты. И именно данный массив и будет отображаться на странице корзины. Объект купленного продукта будет, например, таким.

{
  id: 0,
  name: "Nokia 3310",
  description: "Телефон, переживший падение в жерло вулкана",
  url: "https://static.shiftdelete.net/wp-content/uploads/2018/05/nokia-3310-1-milyon-volt-yuke-dayandi-sdn-01.jpg",
  price: 2800,
  count: 1
}

На странице у нас будет несколько кнопок. Первая отвечает за удивление продукта из корзины, вторая за добавление ещё одного товара, и последняя за удаление одного товара. При каждом нажатии, мы будет обращаться к массиву с объектами и искать нужный элемент. Если он есть, то при покупке, изменять его count, добавляя один. Как это будет происходить?

Расскажу про алгоритм добавления элемента в массив:

1. При нажатии, мы будет получать его идентификатор.
   
2. Затем проходимся по массиву через цикл find получаем сам объект.
   
3. В конце записываем полученный объект в массив. (P.S. Запомните одно важное правило, поскольку в React или Redux нельзя изменять состояние, использовать push следует крайне осторожно. В данном случае использовать push не стоит, пригодиться spread-оператор).
   

Хоть и написал в ответе, продублировать здесь лишним не будет. Утром не смог добавить пример. Однако, исходя из вашего изначального вопроса о магазине, написал простенький пример.

Скажу сразу, повторение кода в примере сознательное. Если будете делать нечто такое самостоятельно, избегайте повторение кода, поскольку это может повлиять на поддержку приложения. Да и вообще, повторять код не есть хорошо, если тот конечно не сознательно повторённый.

Сам пример: CodeSandbox (Cart)

Comments

[Дима Минчев]

а сам алгоритм кода, при Button => onClick как работает и при переходе?

[Дима Минчев]

У меня получилось сделать счетчик события, но при "добавление" или "убывание", он меняет во всех местах, вот код

import React from 'react';

class ShoppingList extends React.Component {
    constructor() {
        super();
        this.state = {
            counter: 0,
        }
    }
    onClickUp = () => {
        this.setState((prevState) => {
            return {
                counter: prevState.counter + 1,
            }
        })
    };
    onClickDown = () => {
        this.setState((prevState) => {
            return {
                counter: prevState.counter - 1,
            }
        })
    };

    render() {
        return (
            <div>
                <div>
                    <img
                        src="https://s1.stc.all.kpcdn.net/putevoditel/projectid_103889/images/tild3230-3862-4039-b139-343530613431__bananas-1354785_1280.jpg"
                        alt=""/>
                    <p>Text</p>
                    <h1>{this.state.counter}</h1>
                    <button onClick={this.onClickUp}>Добвить</button>
                    <button onClick={this.onClickDown}>Убавить</button>
                    <button>Добавить в корзину</button>
                </div>
                <div>
                    <img
                        src="https://s1.stc.all.kpcdn.net/putevoditel/projectid_103889/images/tild3230-3862-4039-b139-343530613431__bananas-1354785_1280.jpg"
                        alt=""/>
                    <p>Text</p>
                    <h1>{this.state.counter}</h1>
                    <button onClick={this.onClickUp}>Добвить</button>
                    <button onClick={this.onClickDown}>Убавить</button>
                    <button>Добавить в корзину</button>
                </div>
                <div>
                    <img
                        src="https://s1.stc.all.kpcdn.net/putevoditel/projectid_103889/images/tild3230-3862-4039-b139-343530613431__bananas-1354785_1280.jpg"
                        alt=""/>
                    <p>Text</p>
                    <h1>{this.state.counter}</h1>
                    <button onClick={this.onClickUp}>Добвить</button>
                    <button onClick={this.onClickDown}>Убавить</button>
                    <button>Добавить в корзину</button>
                </div>
            </div>
        )
    }
}


export default ShoppingList;

[Дима Минчев]

Все что выше написал, я сделал, как теперь с помощи кнопки или линки, переходить в Корзину, и сохранить состояние то что выбрал в товарах??

[Даниил Кочкин]

Дима Минчев, Прошу прощения за то, что не ответил ранее.

Счётчик меняется потому как он глобальный, если можно так выразиться. А не локальный для каждого элемента. Таким образом, вам нужен локальный стейт.

Из этого следует: вас нужно создать несколько компонентов: первый — это лист, который будет получать массив элементов и рисовать их на странице через map, одновременно внутри вызывая другой компонент, занимающийся структурой одного счётчика. Благодаря данному подходу, счётчик в каждом элементе будет являться локальным.

Я думаю это видео будет полезным: React & Redux #3 Локальный стейт.

Касательно первого вопроса, утром не смог добавить пример. Однако, исходя из вашего изначального вопроса о магазине, написал простенький пример.

Скажу сразу, повторение кода в примере сознательное. Если будете делать нечто такое самостоятельно, избегайте повторение кода, поскольку это может повлиять на поддержку приложения. Да и вообще, повторять код не есть хорошо, если тот конечно не сознательно повторённый.

Сам пример: CodeSandbox (Cart)

[Дима Минчев]

Даниил Кочкин, Ошибка в коде, не могу посмотреть(

[Даниил Кочкин]

Дима Минчев, Какая именно ошибка? Вроде проверил в двух браузерах перед тем, как отправлять ссылку. Всё работало.

[Дима Минчев]

Даниил Кочкин,

[Даниил Кочкин]

Дима Минчев, К сожалению, впервые вижу такую проблему (возможно что-то с зависимостями, как сказано в ошибке). Попытался найти в интернете ответ, не получилось.

Потому, дабы не засорять комментарии, напишите мне в телеграм.

Answer 2

[WbICHA]

Все ответы есть здесь: https://ru.reactjs.org/tutorial/tutorial.html