无法对 Gatsby 站点的 Ant Design Table 中的列进行排序

IT技术 javascript reactjs graphql gatsby antd
2021-05-03 18:42:46

我在 Gatsby 站点中实现了一个 Ant 设计表。我正在从 graphql 中提取数据。到目前为止，一切都运行良好。数据显示正常，分页工作等。

现在我想添加对列进行排序的功能。为此，我按如下方式设置表和列：

<Table
  dataSource={data.allNewsFeed.edges}
  onChange={onChange}
  rowSelection={rowSelection}
  rowKey="id"
>
  <Column
    title="Title"
    dataIndex="node.title"
    key="title"
    sorter={(a, b) => a.node.title - b.node.title}
    sortDirections={["descend", "ascend"]}
  />
</Table>

现在，用于对列进行排序的图标确实出现了，但是当我单击它时没有任何react。

同样的事情发生，如果我删除.node从分拣机功能： sorter={(a, b) => a.title - b.title}。

所以，我被卡住了 - 知道为什么这不起作用以及如何解决它吗？

谢谢。

2个回答

@norbitrial 的答案是正确的，作为参考，这里是一个通用排序器（用于数字和字符串）：

const sorter = (a, b) => (isNaN(a) && isNaN(b) ? (a || '').localeCompare(b || '') : a - b);

// Usage example with antd table column
[
  {
    title: 'Status',
    dataIndex: 'status',
    key: 'status',
    width: '10%',
    // status can be Number or String
    sorter: (a, b) => sorter(a.status, b.status),
    render: Name
  }
]

我猜你可以改用中a.node.title - b.node.title的String.prototype.localeCompare正确排序。正如文档所述：

localeCompare() 方法返回一个数字，该数字指示引用字符串在排序顺序中是在给定字符串之前还是之后，或者是否与给定字符串相同。

不知怎的：

const values = ['random', 'something', 'else', 'text'];
const result = values.sort((a,b) => {
  return a.localeCompare(b);
});

console.log(result);

所以我想在提到的情况下它会是：

<Column title="Title"
        dataIndex="node.title"
        key="title"
        sorter={(a, b) => a.node.title.localeCompare(b.node.title)}
        sortDirections={["descend", "ascend"]} />

我希望这有帮助！

其它你可能感兴趣的问题
上一篇挤出机热端的热失控 下一篇使用 BLTouch 代替限位开关的优缺点是什么？