ant-design中Table组件在进行列排序图表展示错误问题?

Question

ant-design中的Table组件，设置某列可进行排序操作。第一次点击降序的箭头，发现高亮的却是升序的箭头。这要怎么去进行修改。官网里面的Demo也是有这样的情况。

ant-design中的Table组件，设置某列可进行排序操作。希望第一次点击降序箭头的时候，高亮的是降序箭头，而不是升序箭头。

Answer 1

import React, { useState } from 'react';
import { Table } from 'antd';

const App = () => {
  const [sortedInfo, setSortedInfo] = useState({
    order: 'descend',
    columnKey: 'age'
  });

  const data = [
    {
      key: '1',
      name: 'John',
      age: 32,
    },
    {
      key: '2',
      name: 'Jim',
      age: 42,
    }
  ];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: (a, b) => a.age - b.age,
      sortOrder: sortedInfo.columnKey === 'age' ? sortedInfo.order : null,
    }
  ];

  const handleChange = (pagination, filters, sorter) => {
    setSortedInfo(sorter);
  };

  return (
    <Table 
      columns={columns} 
      dataSource={data} 
      onChange={handleChange}
    />
  );
};

export default App;