antd表onChange分类器没有得到“未定义”

Question

我已经创建了一个与所有数据反应的antd表。我需要为两个列Name和Last Updated At实现一个排序函数。为此，我使用了antd表的onChange={(val:any, filter:any, sorter:any})函数，并从中获取sorter值，并向它传递一个名为handleChange(val, sorter)的函数，如下所示。

const handleChange = (val: any, sorter: any) => {
    console.log(val, sorter);
    if (sorter.order === "ascend") {
      setSortOrderRaw("asc");
    } else if (sorter.order === "descend") {
      setSortOrderRaw("desc");
    } else if (sorter.order === undefined) {
      setSortOrderRaw("");
    }

    if (sorter.columnKey !== undefined) {
      setSortFieldRaw(sorter.columnKey);
    } else {
      setSortFieldRaw("");
    }

    setPageSizeOther(val?.pageSize);
    setCurrentPageOther(val?.current);
};

并将sortOrderRaw和sortFieldRaw添加为useEffect的依赖项。

 useEffect(() => {
      getData();
  }, [
    pageSizeOther,
    currentPageOther,
    sortOrderRaw,
    sortFieldRaw,
  ]);

因此，getData()函数应该在每次sortOrderRaw更改时触发。

问题是当我单击列标题进行排序时，它的排序顺序应该是ascend、descend，然后顺序应该变成undefined，但是在这里，它的顺序是descend、ascend、ascend descend、ascend、ascend.粗体和意大利语的ascend应该变成undefined，然后只有getData()函数才会触发和填充表，而不进行任何排序。但是在这里，当它连续地获得ascend时，getData()函数不会触发，因为状态不会改变。

注意:即使工具提示也没有显示click to cancel sorting，而是显示连续单击的click to sort ascending。

    <Table
      columns={columns}
      dataSource={data}
      loading={loading}
      pagination={{
        current: currentPage,
        pageSize,
        total,
        showQuickJumper: true,
        showSizeChanger: true,
      }}
      sortDirections={["ascend", "descend"]}
      onChange={(val: any, filter: any, sorter: any, extra: any) => {
        handleChange(val, sorter);
      }}
    />

各自列

  const columns: any[] = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      width: "20%",
      sorter: true,
    },
    {
      title: "Last Updated On",
      key: "CreatedAt",
      sorter: true,
      render: (_: any, record: any) => {
        return DateTime.fromMillis(record.CreatedAt).toFormat(
          "dd:MM:yyyy,  hh:mm:ss a",
        );
      },
    }
 ]

Answer 1

请从您的表配置中删除sortDirections={["ascend", "descend"]}。您的配置告诉Table只使用两个选项，而不是您想要的3个选项。

使用您的代码创建示例https://codesandbox.io/s/loving-butterfly-85ot6v