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.

clipboard.png

:title

title

clipboard.png

:_store_store

clipboard.png

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


has been solved, but the problem is that a new object is recreated in _ store after sending the action (note that the creation is not copied, causing their references to be different). I successfully solved this problem by modifying the antd source code and recompiling it:

var oldSortOrder = (sortColumn ? sortColumn.dataIndex : {}) === (column ? column.dataIndex : {}) || shallowEqual(sortColumn, column) ? sortOrder : undefined;

all we have to do is make sure that the current switch is the same column of data, so it is possible to judge their dataIndex

.

you can update antd to 3.11.0 version


add a key, or take the columns out of the render.

Menu