Правильное отображение данных при сортировке

@Alex562035 · Регистрация: 04.01.2018

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

Всем Привет! Кто может подсказать как правильнее мне применить мою сортировку в React. У меня есть список данных которые я получаю из Firebase books1 они изначально отображаются друг за другом в таком формате:

JSON
1
2
3
4
5
6
{"Name": "Javascript", "Author": "Den", "Year": "2015", "raiting": 5, "ISBN": 67556-5656},
  {"Name": "Java", "Author": "Den", "Year": "2017", "raiting": 5, "ISBN": 67556-5656},
  {"Name": "Linux", "Author": "Den", "Year": "2015", "raiting": 5, "ISBN": 67556-5656},
  {"Name": "SQL", "Author": "Den", "Year": "2018", "raiting": 5, "ISBN": 67556-5656},
  {"Name": "Python", "Author": "Tom", "Year": "2016", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "Книга для новичков", "Author": "Leo", "Year": "2017", "raiting": 4, "ISBN": 67556-5656},

...

Но мне их нужно отсортировать вначале по годам, а потом уже в алфавитном порядке. Что я собственно и сделал, но на чистом JavaScript, но не знаю как это все правильно теперь применить в React.

Вот успешный код логики который я писал на чистом JS для сортировки по годам и в алфавитном порядке книги, и хочу применить в React

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
//так скажем основа для дальнейшей структуры
let list_copy = {
  books_copy:{
    
  }
}
 
let db = [
  {"Name": "Javascript", "Author": "Den", "Year": "2015", "raiting": 5, "ISBN": 67556-5656},
  {"Name": "Java", "Author": "Den", "Year": "2017", "raiting": 5, "ISBN": 67556-5656},
  {"Name": "Linux", "Author": "Den", "Year": "2015", "raiting": 5, "ISBN": 67556-5656},
  {"Name": "SQL", "Author": "Den", "Year": "2018", "raiting": 5, "ISBN": 67556-5656},
  {"Name": "Python", "Author": "Tom", "Year": "2016", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "Matlab", "Author": "Mark", "Year": "2014", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "Pascal", "Author": "Tom", "Year": "2016", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "Excel", "Author": "Mark", "Year": "2018", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "C#", "Author": "Leo", "Year": "2017", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "Линукс", "Author": "Leo", "Year": "2020", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "Виндовс", "Author": "Leo", "Year": "2017", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "Книга для новичков", "Author": "Leo", "Year": "2017", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "Базовые основы языков", "Author": "David", "Year": "2020", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "Грокаем алгоритмы", "Author": "David", "Year": "2015", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "Изучаем язык вместе", "Author": "David", "Year": "2020", "raiting": 4, "ISBN": 67556-5656},
  {"Name": "Jenkins", "Author": "David", "Year": "2018", "raiting": 4, "ISBN": 67556-5656},
 
]
 
let year = [] //массив под  года
 
//сортируем года по возрастанию
function sort(){
      for(let i = 0; i < db.length; i++){
          db[i].Year = Number(db[i].Year)
      }
      db.sort((a, b) => a.Year > b.Year ? 1 : -1);
  }
sort()
 
//заносим уникальные года и сортируем их в порядке на увеличение
function year_array(){
  for(let i = 0; i < db.length; i++){
    year.push(db[i].Year)
  }
  year = year.filter((item, index) => year.indexOf(item) === index) //удаляем дубликаты
}
 
year_array()
 
//добавяем массив с годами
function sort_year(){
  for(let i = 0; i < year.length; i++){
    list_copy.books_copy[year[i]] = [] //создаем пустой массив под каждый год
  }
  //сортируем книги по годам
  for(let i = 0; i < year.length; i++){
    for(let j = 0; j < db.length; j++){
      if(db[j].Year == year[i]){
        list_copy.books_copy[year[i]].push(db[j])
      }
    }
  }
}
 
sort_year()
 
//сортировка по имени
 
function sort_name(){
  for(let j = 0; j < Object.keys(list_copy.books_copy).length; j++){
    list_copy.books_copy[year[j]].sort((a, b) => a.Name.localeCompare(b.Name));
  }
}
sort_name()
  console.log(list_copy.books_copy)

Вот такой формат я получаю на выходе как и положено

JSON
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
"books_copy":{
"2014":[
{
"Name":"Matlab",
"Author":"Mark",
"Year":2014,
"raiting":4,
"ISBN":61900
}
],
"2015":[
{
"Name":"Грокаем алгоритмы",
"Author":"David",
"Year":2015,
"raiting":4,
"ISBN":61900
},
{
"Name":"Javascript",
"Author":"Den",
"Year":2015,
"raiting":5,
"ISBN":61900
},
{
"Name":"Linux",
"Author":"Den",
"Year":2015,
"raiting":5,
"ISBN":61900
}
],
"2016":[
{
"Name":"Pascal",
"Author":"Tom",
"Year":2016,
"raiting":4,
"ISBN":61900
},
{
"Name":"Python",
"Author":"Tom",
"Year":2016,
"raiting":4,
"ISBN":61900
}
],
"2017":[
{
"Name":"Виндовс",
"Author":"Leo",
"Year":2017,
"raiting":4,
"ISBN":61900
},
{
"Name":"Книга для новичков",
"Author":"Leo",
"Year":2017,
"raiting":4,
"ISBN":61900
},
{
"Name":"C#",
"Author":"Leo",
"Year":2017,
"raiting":4,
"ISBN":61900
},
{
"Name":"Java",
"Author":"Den",
"Year":2017,
"raiting":5,
"ISBN":61900
}
],
"2018":[
{
"Name":"Excel",
"Author":"Mark",
"Year":2018,
"raiting":4,
"ISBN":61900
},
{
"Name":"Jenkins",
"Author":"David",
"Year":2018,
"raiting":4,
"ISBN":61900
},
{
"Name":"SQL",
"Author":"Den",
"Year":2018,
"raiting":5,
"ISBN":61900
}
],
"2020":[
{
"Name":"Базовые основы языков",
"Author":"David",
"Year":2020,
"raiting":4,
"ISBN":61900
},
{
"Name":"Изучаем язык вместе",
"Author":"David",
"Year":2020,
"raiting":4,
"ISBN":61900
},
{
"Name":"Линукс",
"Author":"Leo",
"Year":2020,
"raiting":4,
"ISBN":61900
}
]
}

А вот как у меня выглядит компонент на React, где тупо решил вставить функции с логикой из чистого JS сортировки и в дальнейшем поменять books1 на мой отсортированный list_copy при рендеринге, но тут так как-то делать нельзя и нужно что-то предпринимать другое но не знаю как, возможно нужно создавать какой-то еще один стейт и что-то добавлять туда...

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
import React, { useEffect, useState } from 'react'
import firebase from '../../firebase';
import {Link, useHistory} from 'react-router-dom';
const MainPage = () => {
 
    const [books1, setBooks] = useState([])
    let history = useHistory();
 
    const ref = firebase.firestore().collection('books1');
 
    const getBooksList = () => {
        ref.onSnapshot((querySnapshot)=> {
            const list = [];
            querySnapshot.forEach((doc)=>{
                list.push(doc.data());
            });
            setBooks(list)
        })
    };
 
    const deleteBook = (id) => {
        ref
            .doc(id)
            .delete()
            .catch((err) =>{
                console.error(err);
            })
    }
 
    const editBook = (id) => {
        history.push('/editbook/' + id)
    }
 
 
 
    useEffect(() => {
        getBooksList();
    }, [])
 
    let list_copy = {
        books_copy:{
    
        }
    }
 
    let year = []
 
    //сортируем года по возрастанию
function sort(){
      for(let i = 0; i < books1.length; i++){
          books1[i].Year = Number(books1[i].Year)
      }
      books1.sort((a, b) => a.Year > b.Year ? 1 : -1);
  }
sort()
 
//создаем отдельный массив под года
function year_array(){
  for(let i = 0; i < books1.length; i++){
    year.push(books1[i].Year)
  }
  year = year.filter((item, index) => year.indexOf(item) === index) //удаляем дубликаты
}
 
year_array()
 
 
function sort_year(){
  for(let i = 0; i < year.length; i++){
    list_copy.books_copy[year[i]] = []
  }
  for(let i = 0; i < year.length; i++){
    for(let j = 0; j < books1.length; j++){
      if(books1[j].Year == year[i]){
        list_copy.books_copy[year[i]].push(books1[j])
      }
    }
  }
}
 
sort_year()
 
//сортировка по имени
 
function sort_name(){
  for(let j = 0; j < Object.keys(list_copy.books_copy).length; j++){
    list_copy.books_copy[year[j]].sort((a, b) => a.Name.localeCompare(b.Name));
  }
}
sort_name()
 
 
 
    return(
        <>
        <div>
            <p>Test </p>
            {list_copy.books_copy.map((c) =>(
                <div key={c.id}>
                    <p>Год: </p>
                    <div>
                        <h5>{c.Name}</h5>
                        <p>Автор: {c.Author}</p>
                        <p>Год публикации: {c.Year}</p>
                        <p>Рейтинг: {c.Raiting}</p>
                        <p>ISBN: {c.ISBN}</p>
                        <button onClick={() => deleteBook(c.id)}>Удалить</button>
                        <button onClick={() => editBook(c.id)}>Изменить</button>
                    </div>
                </div>
            ))}
        </div>
        </>
    )
}
 
export default MainPage;

@Alex562035 · 12.06.2021, 11:35 **[ТС]**

Я пробую даже отобразить данные моего нового полученного массива list_copy.books_copy и вывести к примеру в теги какой-нибудь массив с данными например Название книги: {list_copy.books_copy[2016][0].Name} и если обновить страницу то выскочит ошибка TypeError: Cannot read property '0' of undefined но если сначала закомментировать строчку и оставить так Название книги: а когда станица отобразится то добавить изначальный тег с данными Название книги: {list_copy.books_copy[2016][0].Name} то все будет успешно и появится сообщение Название книги JavaScrupt, а если снова обновить страницу то опять будет ошибка TypeError: Cannot read property '0' of undefined Я что-то делаю не так, мне кажется что не успевает выполниться процесс сортировки моих функций и из-за этого он не понимает что за данные. Я пробовал добавить состояние и поставить loading и когда выполниться процесс всех функций то отобразить его но это тоже не помогло

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
import React, { useEffect, useState } from 'react'
import firebase from '../../firebase';
import {Link, useHistory} from 'react-router-dom';
const MainPage = () => {
 
    const [books1, setBooks] = useState([])
    const [loading, setLoading] = useState(false)
    let history = useHistory();
 
    const ref = firebase.firestore().collection('books1');
 
    const getBooksList = () => {
        ref.onSnapshot((querySnapshot)=> {
            const list = [];
            querySnapshot.forEach((doc)=>{
                list.push(doc.data());
            });
            setBooks(list)
        })
    };
 
    const deleteBook = (id) => {
        ref
            .doc(id)
            .delete()
            .catch((err) =>{
                console.error(err);
            })
    }
 
    const editBook = (id) => {
        history.push('/editbook/' + id)
    }
 
 
 
    useEffect(() => {
        getBooksList();
    }, [])
 
    let list_copy = {
        books_copy:{
    
        }
    }
 
 
    let year = []
 
    //сортируем года по возрастанию
    const sort = () => {
      for(let i = 0; i < books1.length; i++){
          books1[i].Year = Number(books1[i].Year)
      }
      books1.sort((a, b) => a.Year > b.Year ? 1 : -1);
  }
  sort()
 
//создаем отдельный массив под года
  const year_array = () => {
  for(let i = 0; i < books1.length; i++){
    year.push(books1[i].Year)
  }
  year = year.filter((item, index) => year.indexOf(item) === index) //удаляем дубликаты
}
 
year_array()
 
 
const sort_year = () =>{
  for(let i = 0; i < year.length; i++){
    list_copy.books_copy[year[i]] = []
  }
  for(let i = 0; i < year.length; i++){
    for(let j = 0; j < books1.length; j++){
      if(books1[j].Year == year[i]){
        list_copy.books_copy[year[i]].push(books1[j])
      }
    }
  }
}
 
sort_year()
 
 
//сортировка по имени
 
function sort_name(){
  for(let j = 0; j < Object.keys(list_copy.books_copy).length; j++){
    list_copy.books_copy[year[j]].sort((a, b) => a.Name.localeCompare(b.Name));
  }
  setLoading(true)
}
sort_name()
 
 
 
    return(
        <>
        {loading ? 
        <div>
            <p>Название книги: {list_copy.books_copy[2016][0].Name}</p>
            {/* {.map((c) =>(
                <div key={c.id}>
                    <p>Год: </p>
                    <div>
                        <h5>{c.Name}</h5>
                        <p>Автор: {c.Author}</p>
                        <p>Год публикации: {c.Year}</p>
                        <p>Рейтинг: {c.Raiting}</p>
                        <p>ISBN: {c.ISBN}</p>
                        <button onClick={() => deleteBook(c.id)}>Удалить</button>
                        <button onClick={() => editBook(c.id)}>Изменить</button>
                    </div>
                </div> */}
        </div>
        : <div>Loading...</div>
            }
        </>
    )
}
 
export default MainPage;

@Ovederax · 12.06.2021, 13:31

как работает сейчас можно смотреть здесь
https://stackblitz.com/edit/bo... src/App.js

Не совсем уверен в том что последовательность всегда сортированная для
for (const year in grouppedBooks) {
Но это можно подправить, добавив в useMemo вытаскивание ключей, их сортировку и только затем по отсортированным ключам сделать элементы

database.js

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
const data = [
  {
    Name: 'Javascript',
    Author: 'Den',
    raiting: 5,
    ISBN: 67556 - 5656
  },
  { Name: 'Java', Author: 'Den', Year: '2017', raiting: 5, ISBN: 67556 - 5656 },
  {
    Name: 'Linux',
    Author: 'Den',
    Year: '2021',
    raiting: 5,
    ISBN: 67556 - 5656
  },
  { Name: 'SQL', Author: 'Den', Year: '2018', raiting: 5, ISBN: 67556 - 5656 },
  {
    Name: 'Python',
    Author: 'Tom',
    Year: '2001',
    raiting: 4,
    ISBN: 67556 - 5656
  },
  {
    Name: 'Matlab',
    Author: 'Mark',
    Year: '2014',
    raiting: 4,
    ISBN: 67556 - 5656
  },
  {
    Name: 'Pascal',
    Author: 'Tom',
    Year: '2016',
    raiting: 4,
    ISBN: 67556 - 5656
  },
  {
    Name: 'Excel',
    Author: 'Mark',
    Year: '2018',
    raiting: 4,
    ISBN: 67556 - 5656
  },
  { Name: 'C#', Author: 'Leo', Year: '2017', raiting: 4, ISBN: 67556 - 5656 },
  {
    Name: 'Линукс',
    Author: 'Leo',
    Year: '2020',
    raiting: 4,
    ISBN: 67556 - 5656
  },
  {
    Name: 'Виндовс',
    Author: 'Leo',
    Year: '2017',
    raiting: 4,
    ISBN: 67556 - 5656
  },
  {
    Name: 'Книга для новичков',
    Author: 'Leo',
    Year: '2017',
    raiting: 4,
    ISBN: 67556 - 5656
  },
  {
    Name: 'Базовые основы языков',
    Author: 'David',
    Year: '2020',
    raiting: 4,
    ISBN: 67556 - 5656
  },
  {
    Name: 'Грокаем алгоритмы',
    Author: 'David',
    Year: '2015',
    raiting: 4,
    ISBN: 67556 - 5656
  },
  {
    Name: 'Изучаем язык вместе',
    Author: 'David',
    Year: '2020',
    raiting: 4,
    ISBN: 67556 - 5656
  },
  {
    Name: 'Jenkins',
    Author: 'David',
    Year: '2018',
    raiting: 4,
    ISBN: 67556 - 5656
  }
];
 
const getBooks = () => data;
 
export const booksService = {
  getBooks,
  removeBook: id => {}
};

utils.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export function groupBooksByYear(books) {
  const grouppedBooks = {};
  books.forEach(item => {
    let year = item.Year;
    if (year === undefined) year = 0;
    if (grouppedBooks[year] === undefined) {
      grouppedBooks[year] = [];
    }
    grouppedBooks[year].push(item);
  });
  return grouppedBooks;
}
 
export function sortBooksByName(books) {
  return books.sort((a, b) => a.Name.localeCompare(b.Name));
}

app.js

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
import React, { useEffect, useState, useMemo } from 'react';
import { booksService } from './database';
import { groupBooksByYear, sortBooksByName } from './utils';
import './styles.css';
 
const Book = ({ book, deleteBook, editBook }) => {
  return (
    <div>
      <h5>{book.Name}</h5>
      <p>Автор: {book.Author}</p>
      <p>Год публикации: {book.Year}</p>
      <p>Рейтинг: {book.raiting}</p>
      <p>ISBN: {book.ISBN}</p>
      <button onClick={() => deleteBook(book.id)}>Удалить</button>
      <button onClick={() => editBook(book.id)}>Изменить</button>
    </div>
  );
};
 
const MainPage = () => {
  const [books, setBooks] = useState([]);
 
  const getBooksList = () => {
    const booksList = booksService.getBooks();
    setBooks(booksList);
  };
 
  useEffect(() => {
    getBooksList();
  }, []);
 
  const deleteBook = id => booksService.removeBook(id);
  const editBook = id => {};
 
  const grouppedBooks = groupBooksByYear(sortBooksByName(books));
  const elements = useMemo(() => {
    const grouppedElements = [];
    for (const year in grouppedBooks) {
      const booksGroup = grouppedBooks[year];
      const group = (
        <div>
          <span>{year === '0' ? 'Not defined' : year}:</span>
          {booksGroup.map(book => (
            <Book
              key={book.id}
              book={book}
              deleteBook={deleteBook}
              editBook={editBook}
            />
          ))}
          <br />
        </div>
      );
      grouppedElements.push(group);
    }
    return grouppedElements;
  }, [books]);
 
  return (
    <>
      <div>
        <p>Books</p>
        {elements}
      </div>
    </>
  );
};
 
export default MainPage;

Добавлено через 9 минут
Да и лучше, если ты кроме форума будешь дублировать проект в github либо на онлайн площадке codepen / stackblitz и тд
Некоторым лень собирать пустой проект, перетаскивать куски кода по файлам и рефакторить, это утомительно

@Alex562035 · 12.06.2021, 18:42 **[ТС]**

Спасибо большое, очень помог своим кодом и советами))

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование 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, то после закрытия окошка. . .

@Alex562035 0 / 0 / 0 Регистрация: 04.01.2018 Сообщений: 35
	12.06.2021, 18:42 [ТС]
	Спасибо большое, очень помог своим кодом и советами)) 0

Правильное отображение данных при сортировке

Решение