Сортировать таблицу по алфавиту

#reactjs #function #sorting

#reactjs #функция #сортировка

Вопрос:

У меня есть таблица с цифрами и словами. Я хочу отсортировать ее, нажав на заголовок заголовка.

У меня уже была функция сортировки чисел, но функция для слов не работает.

Я попробовал localeCompare и функцию сортировки следующим образом:

 data2.sort((a, b) => {
      if (a[id] < b[id]) return -1;
      if (a[id] > b[id]) return 1;
      return 0;
  

Функция локального сравнения:

 sortowanieNazwy = (id) => {
    const { data2} = this.state;

    data2.sort((a, b) => a[id].localeCompare(b[id]))
    this.setState({ data2 })

  }
  

Я получаю данные из API следующим образом:

 axios
    .get("http://localhost/api?", {params : {rok : this.state.rok, }, headers: { 'Authorization' : 'Bearer '  this.state.token }})
    .then(response =>
      response.data.map(data2 => ({
        IDA: `${data2.id}`,
        Pozycja: `${data2.pozycja}`,
        ...

      }))
    )
    .then(data2 => {
        this.setState({ data2 });
      }
    })
}

  

и создание таблицы:

 data2.map(user => {
  const { IDA...} = user;
  return (
     <>
     <tr id={IDA}>
        <td ><p>{Dzial}</p></td>
        ...

     </tr>

  

Функция localeCompare работает на 90%, первые 2/3 строк сортируются некорректно.
Я сортирую красную колонку. Первые 3 строки пусты, затем идет текст, начинающийся с D, затем текст, начинающийся с Z, а затем остальная часть таблицы отсортирована правильно.

Таблица

После сортировки я сопоставляю таблицу с помощью функции .map

Я из Польши, поэтому мне нужно отсортировать также польские буквы. Я использую UTF-8.

Комментарии:

1. Не могли бы вы привести пример? Потому что localeCompare должно сработать.

2. Покажите больше кода, пожалуйста

3. я добавил экран и свою функцию localCompare

Ответ №1:

localeCompare работает отлично:

 const alphabet = _.shuffle(['a', 'ą', 'b', 'c', 'ć', 'd', 'e', 'ę', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'ł', 'm', 'n', 'ń', 'o', 'ó', 'p', 'r', 's', 'ś', 't', 'u', 'w', 'y', 'z', 'ź', 'ż'])
console.log('Shuffled: ', alphabet.toString())

alphabet.sort((a, b) => a.localeCompare(b))
console.log('Sorted: ', alphabet.toString())  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>  

Комментарии:

1. я попробовал localCompare, и он не работает, как вы можете видеть на экране печати

2. Не могли бы вы привести рабочий пример любой изолированной среды?

3. я получаю данные таблицы из локального API, поэтому код не будет работать :/

4. Но хотя бы фрагмент кода, где вы воспроизводите проблему? В противном случае мы не сможем вам помочь.

5. Хорошо, какая часть кода будет полезна? Я получаю API data prom от axios, затем я сопоставляю его с заголовком таблицы, в котором есть функция onClick={() => this.sortowanieNazwy(‘Описание’)}. я добавил функцию карты и получил функцию.