Блог

У меня есть массив объектов tableData, который необходимо отсортировать по алфавиту.

Это хороший способ для этого?

// ЭТО ТАБЛИЦА ДАННЫХ, В КОТОРОЙ я ИСПОЛЬЗУЮ sort() — это правильный способ?

tableData.sort()

 return (
  <Table.Row
    key={index}
    className={tableData.disabled ? 'adjuster-table-disabled-row' : ''}>
    <Table.Cell style={{ width: '20%' }}>
      {tableData.email || ''}
    </Table.Cell>
    <Table.Cell style={{ width: '10%' }}>
      {tableData.firstName || ''}
    </Table.Cell>
    <Table.Cell style={{ width: '10%' }}>
      {tableData.lastName || ''}
    </Table.Cell>
    <Table.Cell style={{ width: '7%' }}>
      {tableData.dailyAssignments || ''}
    </Table.Cell>
    <Table.Cell style={{ width: '7%' }}>
      {tableData.weeklyAssignments || ''}
    </Table.Cell>
    <Table.Cell style={{ width: '7%' }}>
      {tableData.monthlyAssignments || ''}
    </Table.Cell>
    <Table.Cell style={{ width: '7%' }}>
      {tableData.dailyAverageTime || ''}
    </Table.Cell>
    <Table.Cell style={{ width: '7%' }}>
      {tableData.weeklyAverageTime || ''}
    </Table.Cell>
    <Table.Cell style={{ width: '7%' }}>
      {tableData.monthlyAverageTime || ''}
    </Table.Cell>
    <Table.Cell style={{ width: '12%', textAlign: 'center' }}>
      <a
        onClick={() => runtime.navTo(`/analytics/${tableData.userId}`)}
        style={tableData.disabled ? disabledLinkStyle : normalLinkStyle}>
        Get more statistic
      </a>
    </Table.Cell>
  </Table.Row>
)
  

Я не могу это проверить, поэтому я не уверен, что это правильно.

Это хороший способ для этого?

 tableData.sort()
  

Именно так вы сортируете массив, но:

1. В нынешнем виде это не будет работать корректно, потому что объекты будут сравниваться как строки.

2. Если tableData это часть вашего состояния, вы не можете отсортировать его непосредственно на месте, потому что это напрямую изменило бы состояние ( sort сортирует массив на месте, он не создает копию).

3. Если отсортированная таблица является частью вашего состояния, вам нужно сделать это в setState вызове, а не render . Вы не показали, где вы выполняете sort вызов, но я подумал, что это важно упомянуть.

Так, например, если вы получаете событие с предложением отсортировать по firstName :

 this.setState(({tableData}) => ({
    tableData: tableData.slice().sort((a, b) => a.firstName.localeCompare(b.firstName))
});
  

Это сработает render . slice Создает копию массива перед его сортировкой. sort Обратный вызов сортирует при firstName использовании localeCompare . (Вместо этого вы могли бы использовать Intl.Collator , если массив содержит большое количество записей.)