Question

关于排序表格的快速问题。任何人都可以解释为什么它不是直接从Material UI中排序的ASC或DESC示例示例：https://codesandbox.io/s/13r5l3qyz3，

结果：

Gargantua
Koala Den
aorro

或

aorro
Koala Den
Gargantua

由于

Answer 1

此行为来自此示例中实现排序的方式。这是排序功能（您链接到的CodeSandbox中的第215行）：

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字符串比较can have surprising results。具体来说，由于K中的"Koala Den"为大写，a中的"aorro"为小写，因此结果如下：

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

因此，鉴于使用的排序方法，排序正如预期的那样。它不是像你期望的那样不区分大小写的字符串排序。

您可以通过"aorro"以大写A开头来检查这一点。然后排序将产生预期的结果。

要解决此问题，可能必须重新实现sort函数才能使用每列中可能存在的所有类型。

Answer 2

在比较时将数据转换为小写/大写有助于解决此问题。这也适用于以数字开头的字符串。（即对于['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));

React Material UI表名称排序似乎有点偏离

2 个答案: