Как отсортировать при помощи Select?

Question

[Vlad Yanukovich]

Есть задача, сделать сортировку карточек с помощью select и внутри лежащих option.
Проект строю на реакте.

Так вот вопрос, как сделать сортировку карточек по алфавиту с выбором соответствующего option?

Код селекта:

<select className="sort-select"> 
     <option className="option-item">Популярности</option>
      <option className="option-item">По цене</option>
       <option className="option-item">По алфавиту</option>
</select>

Тут стейт в котором копия оригинального стейта(есть уже кнопки-фильтры)
const [filtered, setFiltered] = useState([])

Данные идут с сервера и имееют следующий вид:

{
    "items" : [
        {
            "id" : 1,
            "name": "Колбаски Барбекю",
            "img": "ссылка на фотохост",
            "pizza": true,
            "drink": false,
            "snacks": false,
            "new": true,
            "meat": true,
            "spicy": true
        },
        {
            "name": "Двойной цыпленок",
            "img": "ссылка на фотохост",
            "pizza": true,
            "drink": false,
            "snacks": false,
            "new": true,
            "meat": true,
            "spicy": false
        }, ...

Мне нужно сортировать по полю name, если я правильно понимаю, однако при вызове метода sort() ничего не происходит и какой-либо option не реагирует на консоль при его выборе (первый раз работаю с select and option).

Помогите разобраться с этой сортировкой.

Comments

[Alex Ozerov]

ниче не понял, на чем ты применяешь метод sort ? лучше дай полный код компонента в котором логику пишешь

[Vlad Yanukovich]

Alex Ozerov, метод sort применяется на стейте, в котором лежит массив с данными "const [filtered, setFiltered] = useState([])" - вот этот стейт

полный код компонента ниже (я убрал тут все свои попытки с методом sort):

import React, { useEffect, useState } from 'react';
import './GoodsPage.css';
import HeaderLogo from '../header-logo/HeaderLogo';
import axios from 'axios';

export default function GoodsPage() {

        const [goods, setGoods] = useState([]);
        useEffect( () => {
            axios.get('тут адрес базы данных')
                .then(res =>   setGoods(res.data))
                .catch(err => console.log(err))
        }, []);

        const [filtered, setFiltered] = useState([]);
                
        function btnHandlers(e) {
            let target = e.target.value;

            if (target === 'Все') {
                setFiltered(goods);
                
            } else if (target === 'Новинки') {
                setFiltered(goods.filter(item => {
                    return item.new
                })) 
                
            } else if (target === 'Мясные') {
                setFiltered(goods.filter(item => {
                    return item.meat 
                })) 
            } else if (target === 'Острые') {
                setFiltered(goods.filter(item => {
                    return item.spicy
                })) 
            } else if (target === 'Напитки') {
                setFiltered(goods.filter(item => {
                    return item.drink
                })) 
            } else if (target === 'Закуски') {
                setFiltered(goods.filter(item => {
                    return item.snacks
                })) 
            }

        }
                

        useEffect( () => {
            setFiltered(goods)
        }, [goods])

            return (
            <>
            <HeaderLogo />
                <div className="goods_page-wrapper">
                
                  <div className="goods-container">

                    <div className="goods-filters-wrapper">

                        <div className="goods_filter-types">
                            <button value="Все" className="filter-btn" onClick={btnHandlers}>Все</button>
                            <button value="Новинки" className="filter-btn" onClick={btnHandlers}>Новинки</button>
                            <button value="Мясные" className="filter-btn" onClick={btnHandlers}>Мясные</button>
                            <button value="Острые" className="filter-btn" onClick={btnHandlers}>Острые</button>
                            <button value="Напитки" className="filter-btn" onClick={btnHandlers}>Напитки</button>
                            <button value="Закуски" className="filter-btn" onClick={btnHandlers}>Закуски</button>
                        </div>

                        <div className="goods_filter-sort">
                            <span className="icon-wrapper">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>
                            </span>
                            
                            <p className="sort-title">Сортировать по: </p>
                            
                            <select className="sort-select" > 
                                <option value="Популярность" className="option-item">Популярности</option>
                                <option value="Цена" className="option-item">По цене</option>
                                <option value="Алфавит" className="option-item">По алфавиту</option>
                            </select>
                        </div>
                    
                </div> 

                    <div className="cards-wrapper"> ... (тут перебор карточек)

            </div>
        </div>
        
    </>)}

Answer 1

[0xD34F]

Описываете варианты сортировки - имя свойства плюс его тип:

const sortOptions = [
  { key: '...', type: '...' },
  { key: '...', type: '...' },
  ...
];

Делаете функции сортировки, кладёте их в объект, ключами будут имена типов данных (значения свойства type из массива sortOptions):

const sortFunctions = {
  type1: (a, b) => ...,
  type2: (a, b) => ...,
  ...
};

На основе массива с вариантами сортировки собираете select:

const [ sortIndex, setSortIndex ] = useState(0);
const onSortChange = e => setSortIndex(+e.target.value);

<select value={sortIndex} onChange={onSortChange}>
  {sortOptions.map((n, i) => <option value={i}>{n.key}</option>)}
</select>

Сортируете свои данные:

const sortedItems = useMemo(() => {
  const { key, type } = sortOptions[sortIndex];
  const f = sortFunctions[type];
  return [...items].sort((a, b) => f(a[key], b[key]));
}, [ items, sortIndex, sortFunctions ]);

https://jsfiddle.net/gfer4p1y/

Comments

[Vlad Yanukovich]

благодарю, это и правда сработало, только осталось понять, что тут происходит, очень уж мудрено получилось, думал это реализуется многим проще)