Таблица может быть отсортирована по алфавиту, но не в обратном алфавитном порядке

Сортировка Javascript, возможно, не так проста, как кажется. Я пытаюсь объяснить вам это, чтобы вы могли исправить свою функцию.

Предположим, у нас есть эти значения:

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Zeros', value: 37 }
];

И пишем эту функцию:

items.sort()

мало что происходит. Это потому, что мы имеем дело со списком объектов и поэтому хотим добавить compareFunction. Вы сделали это довольно хорошо, но я полагаю, вы не совсем понимаете, что он делает. Если мы используем это compareFunction, например:

items.sort(function (a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper/lower case!
  var nameB = b.name.toUpperCase(); // ignore upper/lower case!
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // Namen müssen gleich sein
  return 0;
});

Наш список будет отсортирован по алфавиту. Почему? Потому что мы говорим о функции прямо здесь:

var nameA = a.name.toUpperCase(); // ignore upper/lower case!
var nameB = b.name.toUpperCase(); // ignore upper/lower case!

что мы ищем свойства имени нашего объекта. Мы могли бы легко заменить a.name.toUpperCase() на a.value, и теперь мы будем сортировать наш массив по значению внутри свойства value нашего объекта.

При этом ваша функция сортировки в настоящее время запрограммирована на сортировку в алфавитном порядке (a - z). Вы никогда не реализовывали логику, чтобы сделать обратное или прекратить сортировку. Я думаю, вы, вероятно, предположили, что compareFunction уже выполняет функцию переключения сортировки, но это не так.

Чтобы выполнить сортировку по убыванию (z - a), вы можете использовать функцию .reverse (). Это будет выглядеть примерно так:

items.sort(function (a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper/lower case!
  var nameB = b.name.toUpperCase(); // ignore upper/lower case!
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // Namen müssen gleich sein
  return 0;
}).reverse();

et voilà - ваш список теперь отсортирован в порядке убывания (z - a). (подробнее читайте здесь: Сортировка строк в порядке убывания в Javascript (большинство эффективно)?).

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

подробнее о сортировке массивов (документы javascript: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)

onSortChange = index => {
  const sortMap = {
    default: 'up',
    up: 'down',
    down: 'default',
  };

  let { currentSort, currentIndex } = this.state;

  let nextSort = currentIndex === index ? sortMap[currentSort] : 'default';

  let newRows = [...this.props.rows];

  switch (nextSort) {
    case 'up':
      newRows.sort((a, b) => (a.cells[index] <= b.cells[index] ? -1 : 1));
      break;
    case 'down':
      newRows.sort((a, b) => (b.cells[index] <= a.cells[index] ? -1 : 1));
      break;
  }

  this.setState({ rows: newRows, currentSort: nextSort, currentIndex: index });
};

Во-первых, не следует вызывать метод sort непосредственно на props.rows. Потому что он напрямую изменит props.rows вместо того, чтобы возвращать отсортированный новый массив. Итак, мы сначала получаем копию исходных данных через [...this.props.rows], а затем сортируем ее.

Во-вторых, использование sort в вашем коде неверно. Первый параметр compareFn из sort сравнивает только соотношение размеров между двумя элементами, не беспокоясь ни о чем другом. И порядок должен определяться последним порядком сортировки, записанным в состоянии. В любом случае два элемента, переданные compareFn sort, не указаны по порядку. Он будет отличаться в зависимости от алгоритма, но, говоря простым языком, вы можете подумать, что задача compareFn - только сравнить размер двух случайных элементов в массиве.

Наконец, чтобы не повлиять на последний результат сортировки при нажатии на другой столбец. Мы добавили индекс последнего отсортированного столбца в state. Если индексы двух последних отсортированных столбцов не совпадают, используйте порядок up для прямой сортировки.