Question

我的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>
)

我无法对此进行测试，这就是为什么我不确定是否正确的原因。

Answer 1

这是个好方法吗？
tableData.sort()

您sort an array就是这样，但是：

因为它不能正确工作，因为它将对象作为字符串进行比较。
如果tableData是状态的一部分，则无法直接对其进行排序，因为那样会直接修改状态（sort对数组进行了排序，它不会t复制）。
如果排序后的表是您状态的一部分，则需要通过setState调用而不是render进行。您尚未显示正在进行sort通话的位置，但我认为必须提一下。

例如，如果您收到一个事件，要求按firstName进行排序：

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

这将触发render。 slice在对数组进行排序之前先对其进行复制。 sort回调使用localeCompare在firstName上排序。（如果数组包含大量条目，则可以改用Intl.Collator。）

如何在React JS中按字母顺序对表数据进行排序？

1 个答案: