Сортировка массива по алфавиту перед его фильтрацией и отображением

Question

Я создаю выпадающий список с компонентом React.

Я хочу отсортировать массив перед тем, как отфильтровать и отобразить его, но он продолжает говорить:

data.sort.filter is not a function

Но я посмотрел массивы и javascript, и я вижу метод с именем 'sort', поэтому я не уверен, почему он не позволяет мне его сортировать.

Вот мой код:

const OptionList = () => {

    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'api/departments',
            );
            setData(result.data);
            console.log(JSON.stringify(result, null, 2));
        };
        fetchData();
    }, []);

    return (
        <>
            {data.sort.filter(item => item.groupById === 2).map((item, index) => (
                <option key={index} value={item.id} label={item.name} />
            ))}

            <optgroup label="Other"></optgroup>
            {data.sort.filter(item => item.groupById === 1).map((item, index) => (
                <option key={index} value={item.id} label={item.name} />
            ))}
        </>

    );
}
export default OptionList;

Данные в 'data' - это массив объектов, которые выглядят следующим образом:

{
  "id": 34,
  "name": "Massive Gaming Hillbilly Club",
  "groupById": 2
},

Что я могу сделать не так?

Спасибо!

Answer 1

Вы не вызываете функцию сортировки. Вы, вероятно, имели в виду что-то вроде:

data.sort().filter( ..... )

Вам также нужно будет передать функцию для сравнения элементов с функцией сортировки, чтобы сообщить ей, как сортировать.

Как упоминалось в @HMR, в этом случае sort () изменяет данные, которые вам, вероятно, не нужны в этом месте вашего кода. Вы можете сделать копию или выполнить сортировку в другом месте.

Answer 2

Если вы хотите отсортировать по имени свойства, и я предполагаю, что это строка, то вы можете сделать:

{[...data].sort((a,b)=>a.name.localeCompare(b.name)).filter

Сначала я копирую данные, потому что сортировка изменяет их.

Вы можете также сортируйте его, когда вы устанавливаете состояние:

setData(result.data.sort((a,b)=>a.name.localeCompare(b.name)));

Здесь я изменяю данные, потому что они пришли из топора ios и после установки состояния вы их больше не используете.

Answer 3

Сортировка - это функция, поэтому вам нужно вызвать ее

data.sort().filter(...)