时间戳

首页 > 解决方案 > 无法对 Gatsby 网站的 Ant Design Table 中的列进行排序

javascript - 无法对 Gatsby 网站的 Ant Design Table 中的列进行排序

问题描述

我在 Gatsby 站点中实现了 Ant Design Table。我正在从 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>

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

.node如果我从排序功能 中删除，也会发生同样的事情： sorter={(a, b) => a.title - b.title}.

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

谢谢。

标签： javascriptreactjsgraphqlgatsbyantd

解决方案

我想你可以使用而不是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"]} />

我希望这有帮助！

推荐阅读