Как сделать каталог товаров?

@Константин345 · Регистрация: 17.09.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте.

У меня такой вопрос.
Есть интернет-магазин, внутри него есть каталог товаров. В каталоге много категорий товаров.
Необходимо сделать следующее: при выборе конкретной категории товаров совершать ререндер списка отображаемых товаров.

Т.е., если ранее была выбрана категория товаров "Выпечка", то отображать хлеб и т.д., а если далее была выбрана категория вода(например), то совершить ререндер и заменить предыдущий список отрендеренных товаров(товары категории "Выпечка") на новый список с категорией "Вода".

Как это сделать? Через что? Вообще не пойму.
Кажется задача элементарной, но через что её сделать?

С меня ОГРОМНАЯ благодарность за помощь!

Вот так выглядит сам код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React from "react";
import Title from "./Title";
import Header from "./Header";
import Сategories from "./Categories";
import Slider from "./Components/Slider";
import ImageData from "./Components/ImageData";
import "./Drawer.module.scss";
import Sale from "./Sale/Sale";
import ItemDiscount from "./Sale/Item-discount";
import Lists from "./Sale/Lists";
import SHPandPAY from "./SHIPPING-AND__PAYMENT";
import FreeShopping from "./FreeShopping";
import Footer from "./Footer";
import { Route } from "react-router-dom";
import { Routes } from "react-router-dom";
import Catalog from "./Another/Catalog";
 
function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Title />} />
        <Route path="/Catalog" element={<Title />} />
      </Routes>
      <Routes>
        <Route path="/" element={<Header />} />
        <Route path="/Catalog" element={<Header />} />
      </Routes>
      <Routes>
        <Route path="/" element={<Сategories />} />
        <Route path="/Catalog" element={<Сategories />} />
      </Routes>
      <Routes>
        <Route path="/" element={<Slider slides={ImageData} />} />
      </Routes>
      <Routes>
        <Route path="/" element={<Sale ItemDiscount={ItemDiscount} />} />
      </Routes>
      <Routes>
        <Route path="/" element={<Lists />} />
      </Routes>
      <Routes>
        <Route path="/" element={<SHPandPAY />} />
      </Routes>
      <Routes>
        <Route path="/" element={<FreeShopping />} />
      </Routes>
      <Routes>
        <Route path="/" element={<Footer />} />
      </Routes>
      <Routes>
        <Route path="/Catalog" element={<Catalog />} />
      </Routes>
      <Routes>
        <Route path="/Catalog" element={<Footer />} />
      </Routes>
    </div>
  );
}
 
export default App;

А это страница с каталогом товаров:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
import React from "react";
import { FaSadCry } from "react-icons/fa";
import styles from "../Drawer.module.scss";
import Products from "./Products";
 
function Catalog() {
  const [one, setOne] = React.useState();
  const [selected, setSelected] = React.useState("По популярности");
  const [powerOne, setPowerOne] = React.useState(false);
  const [powerTwo, setPowerTwo] = React.useState(false);
  const [powerThree, setPowerThree] = React.useState(false);
 
  const radioOne = () => {
    setPowerOne(!powerOne);
  };
  const radioTwo = () => {
    setPowerTwo(!powerTwo);
  };
  const radioThree = () => {
    setPowerThree(!powerThree);
  };
  const change = () => {
    setOne(styles.categories);
  };
  const out = () => {
    setOne("");
  };
  const select = (event) => {
    setSelected(event.target.innerHTML);
    setOne("");
  };
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <h1>Хлеб и выпечка</h1>
        <div className={styles.categorySearch}>
          <div
            onClick={change}
            onMouseOver={out}
            className={styles.categorypopular}
          >
            <a>
              {selected}{" "}
              <div className={styles.arrowcreate}>
                <div className={styles.arrowbottom}></div>
                <div className={styles.arrowtop}></div>
              </div>
            </a>
          </div>
          <div className={one ? one : styles.stels}>
            <a onClick={select}>По популярности</a>
            <a onClick={select}>По возрастанию цены</a>
            <a onClick={select}>По уменьшению цены</a>
            <a onClick={select}>Сначала обсуждаемые</a>
            <a onClick={select}>Сначала с лучшей оценкой</a>
          </div>
        </div>
      </div>
      <div className={styles.mainList}>
        <div className={styles.titleBlock}>
          <div className={styles.Peculiarities}>
            <h3>Ососбенности</h3>
            <div>
              <input
                type="radio"
                id="yes"
                onClick={radioOne}
                className={styles.yes}
                checked={powerOne}
              />
              Со скидкой
            </div>
            <div>
              <input
                type="radio"
                id="yes"
                onClick={radioTwo}
                className={styles.yes}
                checked={powerTwo}
              />
              Доставка сегодня
            </div>
            <div>
              <input
                type="radio"
                className={styles.yes}
                onClick={radioThree}
                checked={powerThree}
              />
              Продукция от «Ильинского»
            </div>
          </div>
          <div className={styles.links}>
            <ul>
              <li>Хлеб</li>
              <li>Лаваш и лепешки</li>
              <li>Выпечка</li>
              <li>Баранки и сухарики</li>
              <li>Хлебцы</li>
              <li>Вегетарианцам</li>
              <li>Безглютеновая продукция</li>
              <li>Лаваш и лепешки</li>
            </ul>
          </div>
        </div>
        <div className={styles.centerBlock}>
          <div className={styles.leftBlock}>
            <h3>Каталог</h3>
            <ul>
              <li>
                <p>Кулинария</p>
              </li>
              <li>
                <a>Выпечка</a>
              </li>
              <li>
                <a>Пиццы</a>
              </li>
              <li>
                <a>Гриль-меню</a>
              </li>
              <li>
                <a>Салаты</a>
              </li>
              <li>
                <a>Супы</a>
              </li>
              <li>
                <a>Горячие блюда</a>
              </li>
              <li>
                <a>Десерты</a>
              </li>
            </ul>
            <ul>
              <li>
                <p>Супермаркет</p>
              </li>
              <li>
                <a>Вода и напитки</a>
              </li>
              <li>
                <a>Молоко, масло и яйца</a>
              </li>
              <li>
                <a>Снэки и сухофрукты</a>
              </li>
              <li>
                <a>Кофе, чай и сладости</a>
              </li>
              <li>
                <a>Макароны и крупы</a>
              </li>
              <li>
                <a>Хлеб и выпечка</a>
              </li>
              <li>
                <a>Десерты</a>
              </li>
              <li>
                <a>Консервы и соления</a>
              </li>
            </ul>
            <ul>
              <li>
                <p>Заморозка</p>
              </li>
              <li>
                <a>Пельмени, вареники и равиоли</a>
              </li>
              <li>
                <a>Хинкали и манты</a>
              </li>
              <li>
                <a>Полуфабрикаты</a>
              </li>
              <li>
                <a>Замороженные овощи</a>
              </li>
            </ul>
            <ul>
              <li>
                <p>Заморозка</p>
              </li>
              <li>
                <a>Красота и гигиена</a>
              </li>
              <li>
                <a>Стирка и уборка</a>
              </li>
              <li>
                <a>Полезные мелочи</a>
              </li>
            </ul>
          </div>
          <div className={styles.rightBlock}>
            <Products />
          </div>
        </div>
      </div>
    </div>
  );
}
 
export default Catalog;

А это САМ товар:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, { useState } from "react";
import Json from "../JSON/jsonBackEnd";
import styles from "../Drawer.module.scss";
 
function Products() {
  const [pages, setPages] = useState(0);
  const reading = (event) => {
    setPages(event.target.innerHTML);
  };
  const [checked, setChecked] = useState();
  const check = (event) => {
    setChecked(event.target.innerHTML);
  };
 
  let block = Json[pages].map((item) => (
    <div className={styles.item_description}>
      <img src={item.image} />
      <div className={styles.double}>
        <p className={styles.quantity}>{item.quantity}</p>
        <p className={styles.priceLow}>{item.price}</p>
      </div>
      <p className={styles.name}>{item.name}</p>
      <p className={styles.price}>{item.price}</p>
    </div>
  ));
  let z = [];
  Json.forEach((item, index) => {
    z.push(index);
  });
 
  return (
    <div className={styles.ItemsAndFlip}>
      <div className={styles.items}>{block}</div>
      <div className={styles.flipping}>
        {z.map((item) => (
          <p onClick={reading}>{item}</p>
        ))}
      </div>
    </div>
  );
}
 
export default Products;

krvsa · 06.03.2023, 15:08

Константин345, первый же вопрос - кто так "научил" использовать реакт?

@Константин345 · 06.03.2023, 15:08 **[ТС]**

krvsa, сам)) я самоучка. А можете тыкнуть поточнее - что именно не так?
Никаких курсов не проходил.

krvsa · 06.03.2023, 15:15

Сообщение от Константин345

сам)) я самоучка

Т.е. ни одну книжку по Реакту не читал...

Сообщение от Константин345

А можете тыкнуть поточнее - что именно не так?

Роутинг - не роутинг. Зачем повторять столько раз эти два пути (/ и /Catalog)?
"Каталог" - это просто нет слов.

Суть Реакта - работать с данными. У тебя же везде голимый ХТМЛ.

@Константин345 · 06.03.2023, 15:18 **[ТС]**

Сообщение от krvsa

Т.е. ни одну книжку по Реакту не читал.

только оф. документацию

Добавлено через 2 минуты

Сообщение от krvsa

Суть Реакта - работать с данными. У тебя же везде голимый ХТМЛ.

имеете в виду все HTML куски кода превращать в отдельные компоненты?
Как можно больше компонентов и как минимум меньше каши из HTML?

Я думал над этим, тоже не нравится. Я бы это переделал, когда полностью весть интернет-магазин сделал бы. Перед тем как в портфолио добавить.

Вы можете подсказать, как категории товаров сделать? По сути она есть в любом интернет-магазине. Каталог же есть в любом интернет магазине, просто мне нужно его разбить на категории и сделать так, чтобы можно было выбрав "Хлеб" видеть хлеб, выбрав "Воду" видеть воду. И т.д.

krvsa · 06.03.2023, 15:28

Сообщение от Константин345

только оф. документацию

Значит ты ее совсем не понял...

Начни хоть с этого курса для новичков

Добавлено через 4 минуты

Сообщение от Константин345

имеете в виду все HTML куски кода превращать в отдельные компоненты?

Основой всему в Реакт - данные. Массивы или объекты...
На основе данных строится весь хтмл и почти весь цсс.

Сообщение от Константин345

Каталог же есть в любом интернет магазине, просто мне нужно его разбить на категории и сделать так, чтобы можно было выбрав "Хлеб" видеть хлеб, выбрав "Воду" видеть воду. И т.д.

Данные! Тебе нужно придумать структуру для хранения данных.

Именно с этой структурой тебе далее и нужно будет работать. Нет данных - нет реакта и никакой работы. Будет одна только боль и морока.

Ты будешь за уши тянуть хтмл с цссом в Реакт и плакать по ходу дела.

Добавлено через 2 минуты

Сообщение от Константин345

Как можно больше компонентов и как минимум меньше каши из HTML?
Я думал над этим, тоже не нравится.

Ты просто придумал очередную ерунду. Вот она тебе и не понравилась. Ты взял и сделал другую ерунду, более тебе привычную...

Кабы придумал что-то путнее - оно бы тебе понравилось.

@Константин345 · 06.03.2023, 15:45 **[ТС]**

krvsa, спасибо большое, что направили в нужную сторону!

Добавлено через 6 минут
krvsa, я вспомнил, что я даже курс 20-часовой по реакту глянул. Но видимо не вынес оттуда про "работу с данными"... Этот курс смотрел https://www.udemy.com/course/react-ru/
Можете на примере показать, как должен выглядеть мой код и что КОНКРЕТНО я делаю не так?
Я буду нереально благодарен.

Просто не пойму все равно до конца...

krvsa · 06.03.2023, 16:33

Сообщение от Константин345

Можете на примере показать, как должен выглядеть мой код и что КОНКРЕТНО я делаю не так?

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

Тут вот, давал пример работы со стейтом...
Делегирование событий

Добавлено через 18 минут
Константин345, вот еще один обучающий видос, прямо по твоей тематике.

Но там уже нужно хорошо понимать что автор делает.

@Константин345 · 06.03.2023, 19:11 **[ТС]**

krvsa, Переделал и делаю сейчас так, так лучше?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from "react";
import "./Drawer.module.scss";
import { Route } from "react-router-dom";
import { Routes } from "react-router-dom";
import Path from "./path/Path";
import PageTwo from "./path/PageTwo";
 
function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Path />}>
          <Route path="lists/*" element={<PageTwo />} />
        </Route>
      </Routes>
    </div>
  );
}
 
export default App;

дальше:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import Slider from "../Components/Slider";
import React from "react";
import Сategories from "../Categories";
import { Route } from "react-router-dom";
import { Routes } from "react-router-dom";
import Footer from "../Footer";
import FreeShopping from "../FreeShopping";
import Header from "../Header";
import Lists from "../Sale/Lists";
import Sale from "../Sale/Sale";
import SHPandPAY from "../SHIPPING-AND__PAYMENT";
import Title from "../Title";
import ItemDiscount from "../Sale/Item-discount";
import ImageData from "../Components/ImageData";
 
function Path() {
  return (
    <>
      <Routes>
        <Route path="" element={<Title />} />
      </Routes>
      <Routes>
        <Route path="" element={<Header />} />
      </Routes>
      <Routes>
        <Route path="" element={<Сategories />} />
      </Routes>
      <Routes>
        <Route path="" element={<Slider slides={ImageData} />} />
      </Routes>
      <Routes>
        <Route path="" element={<Sale ItemDiscount={ItemDiscount} />} />
      </Routes>
      <Routes>
        <Route path="" element={<Lists />} />
      </Routes>
      <Routes>
        <Route path="" element={<SHPandPAY />} />
      </Routes>
      <Routes>
        <Route path="" element={<FreeShopping />} />
      </Routes>
      <Routes>
        <Route path="" element={<Footer />} />
      </Routes>
    </>
  );
}
 
export default Path;

и последнее, но почему-то не отображается эта страница, хотя все адреса правильно указаны... Подскажите, плиз, что не так?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from "react";
import { Route, Routes } from "react-router";
import Catalog from "../Another/Catalog";
import Footer from "../Footer";
import Header from "../Header";
import Title from "../Title";
import Сategories from "../Categories";
 
function PageTwo() {
  return (
    <>
      <Routes>
        <Route path="" element={<Title />} />
      </Routes>
      <Routes>
        <Route path="" element={<Header />} />
      </Routes>
      <Routes>
        <Route path="" element={<Сategories />} />
      </Routes>
      <Routes>
        <Route path="" element={<Catalog />} />
      </Routes>
      <Routes>
        <Route path="" element={<Footer />} />
      </Routes>
    </>
  );
}
 
export default PageTwo;

Добавлено через 40 секунд
Т.е. по адресу http://localhost:3000/lists у меня белая страница без содержания...

krvsa · 06.03.2023, 22:07

Сообщение от Константин345

так лучше?

Одна каша вместо другой...

Суть роутинга - менять только изменяемую часть при смене УРЛа.
Т.е. есть некая общая часть, а она у тебя есть на обоих УРЛ. И есть изменяемая - вот она "роутируется".

Зачем опять применять ройтинг "внутри" обработки элемента роута?

@Константин345 · 07.03.2023, 14:22 **[ТС]**

Сообщение от krvsa

Суть роутинга - менять только изменяемую часть при смене УРЛа.

как этого достичь?

Добавлено через 32 минуты
krvsa, вы можете мне помочь и объяснить все то, что я делаю не так?

Добавлено через 10 минут
krvsa, я вам написал в лс

krvsa · 07.03.2023, 14:56

Сообщение от Константин345

вы можете мне помочь и объяснить

Вот смотри... Сваял тебе "рыбу" роутинга. Далее нужно только работать с самими элементами...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React, {useState, useEffect} from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
 
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);
 
function App(props) {
    return (
        <BrowserRouter>
            <Header />
            <Menu />
            <main>
                <Routes>
                    <Route path='*' element={<Home />} />
                    <Route path='test' element={<Test />} />
                </Routes>
            </main>
            <Footer />
        </BrowserRouter>
    )
}
 
function Header(props) {
    return (
        <header>
            <h1>Шапка</h1>
        </header>
    )
}
function Footer(props) {
    return (
        <footer>
            <p>Поддон</p>
        </footer>
    )
}
function Home(props) {
    return (
        <p>Домашняя страница</p>
    )
}
function Test(props) {
    return (
        <p>Тестовая страница</p>
    )
}
function Menu(props) {
    return (
        <nav>
            <h2>Меню</h2>
            <ul>
                <li>
                    <Link to="/">Домашняя</Link>
                </li>
                <li>
                    <Link to="/test">Тестовая</Link>
                </li>
            </ul>
        </nav>
    )
}

@Константин345 · 09.03.2023, 12:35 **[ТС]**

krvsa, я не пойму как сделать так, чтобы была ОСНОВНАЯ часть и другая, которая ротируется(меняется)...
По вашему примеру не пойму вообще.

И что это значит мне непонятно path = *...

Добавлено через 1 минуту
А, вроде всё понял)) спасибо

krvsa · 09.03.2023, 14:34

Константин345, книжки нужно читать по тому, с чем работаешь...

В противном случае всякое будет не понятно. Так и будешь блуждать в темноте.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

Как сделать каталог товаров?

Решение

Решение

krvsa 3833 / 1677 / 431 Регистрация: 14.03.2022 Сообщений: 4,231
	06.03.2023, 15:08
	Константин345, первый же вопрос - кто так "научил" использовать реакт? 0

@Константин345 1 / 4 / 5 Регистрация: 17.09.2015 Сообщений: 194
	06.03.2023, 15:08 [ТС]
	krvsa, сам)) я самоучка. А можете тыкнуть поточнее - что именно не так? Никаких курсов не проходил. 0

@Константин345 1 / 4 / 5 Регистрация: 17.09.2015 Сообщений: 194
	06.03.2023, 15:45 [ТС]
	krvsa, спасибо большое, что направили в нужную сторону! Добавлено через 6 минут krvsa, я вспомнил, что я даже курс 20-часовой по реакту глянул. Но видимо не вынес оттуда про "работу с данными"... Этот курс смотрел https://www.udemy.com/course/react-ru/ Можете на примере показать, как должен выглядеть мой код и что КОНКРЕТНО я делаю не так? Я буду нереально благодарен. Просто не пойму все равно до конца... 0

@Константин345 1 / 4 / 5 Регистрация: 17.09.2015 Сообщений: 194
	09.03.2023, 12:35 [ТС]
	krvsa, я не пойму как сделать так, чтобы была ОСНОВНАЯ часть и другая, которая ротируется(меняется)... По вашему примеру не пойму вообще. И что это значит мне непонятно path = ... Добавлено через 1 минуту* А, вроде всё понял)) спасибо 0

krvsa 3833 / 1677 / 431 Регистрация: 14.03.2022 Сообщений: 4,231
	09.03.2023, 14:34
	Константин345, книжки нужно читать по тому, с чем работаешь... В противном случае всякое будет не понятно. Так и будешь блуждать в темноте. 0