The problem of server sorting in react-antd table

use frames

umi+dva+antd

question

after sending a action using server sorting. The order order of the first sort is descend , and then it has been descend no matter how much you click to switch

troubleshooting process

looked at the source code in antd table, starting at line 610, is the source code that switches the sort order

        key: "toggleSortOrder",
        value: function toggleSortOrder(column) {
            if (!column.sorter) {
                return;
            }
            
            var _state = this.state,
                sortOrder = _state.sortOrder,
                sortColumn = _state.sortColumn;
            // 
            var newSortOrder = void 0;
            //  sortOrder 
            var oldSortOrder = sortColumn === column || shallowEqual(sortColumn, column) ? sortOrder : undefined;
            // //
            if (!oldSortOrder) {
                newSortOrder = "descend";
            } else if (oldSortOrder === "descend") {
                newSortOrder = "ascend";
            } else {
                newSortOrder = undefined;
            }
            var newState = {
                sortOrder: newSortOrder,
                sortColumn: newSortOrder ? column : null
            };
            // Controlled
            if (this.getSortOrderColumns().length === 0) {
                this.setState(newState);
            }
            var onChange = this.props.onChange;

            if (onChange) {
                onChange.apply(null, this.prepareParamsArguments(_extends({}, this.state, newState)));
            }
        }

problem found

in the comment on the second line of the code, we find that sortColumn = column always returns false, so each newSortOrder is true so that no matter how you click to switch, the final sort result is always descend

try to solve

splits each attribute in the sortColumn and column objects for comparison.

:title

title

:_store_store

post the code title . It is important to note that title uses internationalization (guess the problem is on internationalization)

{
    title: <FormattedMessage id="K_AMOUNT" />,
    dataIndex: "amount",
    render: text => {
        return (
            <span id="gac_amount">
                {fmoney(qGacToGac(text), 3)} GAC
            </span>
        );
    },
    sorter: true
}

find a solution