Как сделать правильное отображение данных при сортировке в 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;

Вопрос задан более двух лет назад
153 просмотра

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]

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

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

Написано более двух лет назад

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

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

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

Войти через центр авторизации

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

HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 15 часов назад
- 58 просмотров
2

ответа
React

Простой
Почему не рендерится React-компонент в методе render( )?
- 1 подписчик
- 15 часов назад
- 69 просмотров
1

ответ
React

Простой
У меня react up и я беру из .env пароль а мне бьет ошибку, как быть?
- 1 подписчик
- вчера
- 56 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Сдвигается нижняя граница во время поиска Как исправить?
- 1 подписчик
- 16 апр.
- 46 просмотров
0

ответов
JavaScript

+4 ещё

Простой
Что делать, если после залива приложения на VPS страница остается недоступной?
- 1 подписчик
- 15 апр.
- 84 просмотра
2

ответа
PHP

+2 ещё

Простой
Как подружить html с json?
- 1 подписчик
- 14 апр.
- 164 просмотра
1

ответ
React

Простой
В какую папку React компилирует все файлы?
- 1 подписчик
- 13 апр.
- 82 просмотра
2

ответа
React

+1 ещё

Средний
При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?
- 2 подписчика
- 13 апр.
- 316 просмотров
1

ответ
React

+1 ещё

Простой
Ошибка Cannot read properties of null (reading 'useContext')?
- 1 подписчик
- 13 апр.
- 40 просмотров
0

ответов
React

Простой
Почему при клике на навигацию не меняется id?
- 1 подписчик
- 13 апр.
- 41 просмотр
1

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

Frontend React

Glob-com

от 100 000 ₽

JS|React Native разработчик

Венста • Киров

от 60 000 до 120 000 ₽

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Обработать массив фотографий

19 апр. 2024, в 08:46

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

Скрыть / убрать лишние поля в форме заказа

19 апр. 2024, в 07:30

1500 руб./в час

Доработать телеграм бота

19 апр. 2024, в 03:52

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

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

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

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

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

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

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

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

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

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