Быстрый вопрос о сортировке таблицы. Любой может объяснить, почему он не сортирует пример ASC или DESC, взятый прямо из примера пользовательского интерфейса материала: https://codesandbox.io/ s / 13r5l3qyz3,

Полученные результаты:

Gargantua
Koala Den
aorro

Или

aorro
Koala Den
Gargantua

Благодарность

2
Johnny Derp 13 Мар 2018 в 23:03

2 ответа

Лучший ответ

Такое поведение обусловлено тем, как в этом примере реализована сортировка. Вот функция сортировки (строка 215 в CodeSandbox, с которым вы связались):

const data =
  order === "desc"
    ? this.state.data.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1))
    : this.state.data.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1));

Предполагая, что вы заказываете через name и order === "desc", это в основном сводится к:

const data = this.state.data.sort((a, b) => (b.name < a.name ? -1 : 1));

Итак, окончательный порядок будет результатом сравнений, которые выглядят так:

"Koala Den" < "aorro"
"Gargantua" < "Koala Den"

Но сравнение строк JavaScript может дать удивительные результаты. В частности, поскольку K в "Koala Den" в верхнем регистре, а a в "aorro" в нижнем регистре, результат будет следующим:

"Koala Den" < "aorro" // true
"Gargantua" < "Koala Den" // true

Итак, сортировка работает должным образом с учетом используемого метода сортировки. Это просто сортировка строк без учета регистра, как вы могли бы ожидать.

Вы можете проверить это, начав "aorro" с заглавной буквы A. Тогда у сортировки будут ожидаемые результаты.

Чтобы решить эту проблему, вероятно, придется заново реализовать функцию сортировки для работы со всеми типами, которые могут присутствовать в каждом столбце.

1
Jules Dupont 13 Мар 2018 в 22:36

Преобразование данных в нижний / верхний регистр при сравнении помогает решить проблему. Это также работает для строк, начинающихся с цифр. (т.е. для такого массива, как ['Aeon', '3F Works', 'mBand', 'MAQ']) Вот пример кода:

  const data =
      order === "desc"
        ? this.state.data.sort((a, b) => (b[orderBy].toLowerCase() < a[orderBy].toLowerCase() ? -1 : 1))
        : this.state.data.sort((a, b) => (a[orderBy].toLowerCase() < b[orderBy].toLowerCase() ? -1 : 1));
0
seema wadhwani 16 Янв 2019 в 11:37