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

Question

Alex562035 @Alex562035

React
JSON

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

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

{"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

//так скажем основа для дальнейшей структуры
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)

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

"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 при рендеринге, но тут так как-то делать нельзя и нужно что-то предпринимать другое но не знаю как, возможно нужно создавать какой-то еще один стейт и что-то добавлять туда...

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;

Вопрос задан более трёх лет назад
194 просмотра

3 комментария

Подписаться 1 Простой 3 комментария

Сергей Сунцев @GreyCrew

Чем по вашему сортировка на js отличается от сортировки в react?

Тут вам не angular, реакт не предоставляет специфичных методов для работы с преобразованием данных.

Написано более трёх лет назад

Alex562035 @Alex562035 Автор вопроса

Сергей Сунцев, Я пробую даже отобразить данные моего нового полученного массива 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 и когда выполниться процесс всех функций то отобразить его но это тоже не помогло

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;

Написано более трёх лет назад

Сергей Сунцев @GreyCrew

Alex562035, Прошу прощения, но разбирать код +100 строчек, это вам на фрилансим.

тут могу лишь дать совет, это делать проверку на то, что list_copy.books_copy[2016] существует, типа list_copy.books_copy && list_copy.books_copy[2016]

успевает выполниться процесс сортировки

Если процесс сортировки синхронный, то оснований на то, что он не успевает выполнится у вас нет.

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

React

Средний
Как перенести элемент на наверх по DOM дереву с сохранением его текущей позиции?
- 1 подписчик
- 8 часов назад
- 46 просмотров
0

ответов
React

Простой
Как запустить старый проект?
- 1 подписчик
- 13 часов назад
- 40 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 16 часов назад
- 29 просмотров
0

ответов
React

Простой
Zod: Валидация select?
- 1 подписчик
- вчера
- 54 просмотра
0

ответов
React

Простой
Как, используя i18next-extract, разделять файлы переводов постранично?
- 1 подписчик
- 20 нояб.
- 21 просмотр
0

ответов
React

Простой
Почему данные не подгружаются в форму?
- 2 подписчика
- 18 нояб.
- 76 просмотров
3

ответа
React

Средний
Сборка build открывается на хостинге с ошибками в консоли, на localhost все работает, в чем может быть проблема?
- 1 подписчик
- 17 нояб.
- 132 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему выдает ошибку когда загружаю проект в Vercel?
- 1 подписчик
- 15 нояб.
- 96 просмотров
0

ответов
React

Средний
React Hook Form. Какие существуют лучшие практики приведения объектов полученных с бекенда к значениям формы и обратно?
- 2 подписчика
- 13 нояб.
- 67 просмотров
0

ответов
JavaScript

+4 ещё

Простой
Почему слайдер на базе Swiper с видео YouTube в iframe не двигается при свайпе?
- 2 подписчика
- 13 нояб.
- 80 просмотров
1

ответ
Показать ещё Загружается…

Ведущий React Native разработчик

Студия 15

от 200 000 до 250 000 ₽

React Native Developer

Wanted. • Санкт-Петербург

До 300 000 ₽

React Native developer (+Node.js)

CTRL+ • Москва

от 250 000 до 320 000 ₽

Смонтировать видео

23 нояб. 2024, в 01:31

1000 руб./за проект

Настроить сайт

23 нояб. 2024, в 00:16

2000 руб./за проект

Разобрать текущий ETL-процесс

22 нояб. 2024, в 23:55

3000 руб./за проект

Чем по вашему сортировка на js отличается от сортировки в react?

Тут вам не angular, реакт не предоставляет специфичных методов для работы с преобразованием данных.
Alex562035, Прошу прощения, но разбирать код +100 строчек, это вам на фрилансим.

тут могу лишь дать совет, это делать проверку на то, что list_copy.books_copy[2016] существует, типа list_copy.books_copy && list_copy.books_copy[2016]

успевает выполниться процесс сортировки

Если процесс сортировки синхронный, то оснований на то, что он не успевает выполнится у вас нет.

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт