排序方法和索引

我正在尝试在我的项目中固定数据表。

但是我对排序有问题。

在这里，我使用此示例：https://github.com/facebook/fixed-data-table/blob/master/examples/old/SortExample.js

它按 desc 或 asc 排序。但我对此有问题。

例如，当我第一次按名称对其进行排序时，它带来了这个排序数组。

编号：2 姓名：玛丽

编号：4 姓名：玛丽

ID：5 姓名：玛丽

编号：1 姓名：安娜

编号：3 姓名：安娜

没关系。但是当我再次按名称对它进行排序时。它带来了。

编号：4 姓名：玛丽

编号：2 姓名：玛丽

ID：5 姓名：玛丽

编号：3 姓名：安娜

编号：1 姓名：安娜

好的，它

按名称排序，但问题是：它更改了相同值的索引。例如，它将（id：4 name：Mary）带到第一行。

但是当我第一次排序时，它带来了（id：2 姓名：玛丽）。

为什么它会更改相同的值索引？

排序方法有问题吗？

编辑：这是我的完整代码：

var FixedDataTable = require('fixed-data-table');
var React = require('react');
var Column = FixedDataTable.Column;
var Table = FixedDataTable.Table;
var SortTypes = {
  ASC: 'ASC',
  DESC: 'DESC',
};
function renderDate(/*object*/ cellData) {
  return <span>{cellData.toLocaleString()}</span>;
}
var SortExample = React.createClass({
  getInitialState() {
    return {
      rows: [{"id":"1","name":"Mary"},{"id":"2","name":"Felix"},
                   {"id":"3","name":"Mary"},{"id":"4","name":"Felix"},
                   {"id":"5","name":"Mary"},{"id":"6","name":"Felix"},
                   {"id":"7","name":"Mary"},{"id":"8","name":"Felix"},
                   {"id":"9","name":"Mary"},{"id":"10","name":"Felix"},
                   {"id":"11","name":"Mary"},{"id":"12","name":"Felix"},
                   {"id":"13","name":"Mary"},{"id":"14","name":"Felix"},
                   {"id":"15","name":"Mary"},{"id":"16","name":"Felix"},
                   {"id":"17","name":"Mary"},{"id":"18","name":"Felix"} ,
                   {"id":"19","name":"Mary"},{"id":"20","name":"Felix"}],sortBy: 'id',
      sortDir: null,
    };
  },
  _rowGetter(rowIndex) {
    return this.state.rows[rowIndex];
  },
  _sortRowsBy(cellDataKey) {
    var sortDir = this.state.sortDir;
    var sortBy = cellDataKey;
    if (sortBy === this.state.sortBy) {
      sortDir = this.state.sortDir === SortTypes.ASC ? SortTypes.DESC : SortTypes.ASC;
    } else {
      sortDir = SortTypes.DESC;
    }
    var rows = this.state.rows.slice();
    rows.sort((a, b) => {
      var sortVal = 0;
      if (a[sortBy] > b[sortBy]) {
        sortVal = 1;
      }
      if (a[sortBy] < b[sortBy]) {
        sortVal = -1;
      }
      if (sortDir === SortTypes.DESC) {
        sortVal = sortVal * -1;
      }
      return sortVal;
    });
    this.setState({
      rows,
      sortBy,
      sortDir,
    });
  },
  _renderHeader(label, cellDataKey) {
    return (
      <a onClick={this._sortRowsBy.bind(null, cellDataKey)}>{label}</a>
    );
  },
  render() {
    var sortDirArrow = '';
    if (this.state.sortDir !== null){
      sortDirArrow = this.state.sortDir === SortTypes.DESC ? ' ↓' : ' ↑';
    }
    return (
      <Table
        rowHeight={50}
        rowGetter={this._rowGetter}
        rowsCount={this.state.rows.length}
        headerHeight={50}
        width={1000}
        height={500}
        {...this.props}>
        <Column
          headerRenderer={this._renderHeader}
          label={'id' + (this.state.sortBy === 'id' ? sortDirArrow : '')}
          width={100}
          dataKey='id'
        />
        <Column
          headerRenderer={this._renderHeader}
          label={'First Name' + (this.state.sortBy === 'name' ? sortDirArrow : '')}
          width={200}
          dataKey='name'
        />
      </Table>
    );
  },
});




ReactDOM.render(
 <SortExample/>,
  document.getElementById('app')
)

`var data = [
   {
    id:1,
    name: "Anna"
  },
  {
    id:3,
    name: "Anna"
  },
  {
    id:2,
    name: "Mary"
  },
  {
    id:4,
    name: "Mary"
  },
  {
    id:5,
    name: "Mary"
  }
];
var sortArray = _.sortBy(data, function(o) { return o.name; });
var reverseSortArray = _.cloneDeep(sortArray).reverse();
console.log("sort Array: ", sortArray);
console.log("reverse Sort Array", reverseSortArray);`

var rows = this.state.rows.slice();
rows.sort((a, b) => {
     var sortVal = 0;
     if (a[sortBy] > b[sortBy]) {
          sortVal = 1;
     }
     if (a[sortBy] < b[sortBy]) {
        sortVal = -1;
     }
     if (sortDir === SortTypes.DESC) {
         sortVal = sortVal * -1;
     }
     return sortVal;
});

var i, sortBy, SortTypes, state,count=0;
SortTypes = {
  ASC: 'ASC',
  DESC: 'DESC'
};
sortBy = 'name';
function test( sortDir ) {
  var rows = state.rows.slice();
  rows.sort((a, b) => {
    var sortVal = 0;
    if (a[sortBy] > b[sortBy]) {
      sortVal = 1;
    }
    if (a[sortBy] < b[sortBy]) {
      sortVal = -1;
    }
    if (sortDir === SortTypes.DESC) {
      sortVal = sortVal * -1;
    }
    return sortVal;
  });
  count++;
  document.getElementById('stdout').innerHTML += 
    'SORT: ' + count + ' ' + sortDir + ''n' +JSON.stringify(rows, null, '  ') + ''n'n';
}
// example data
state = {
  rows: [{
    id: '1',
    name: 'Anna'
  }, {
    id: '2',
    name: 'Mary'
  }, {
    id: '30',
    name: 'Anna'
  }, {
    id: '40',
    name: 'Mary'
  }, {
    id: '100',
    name: 'Mary'
  }]
};
for(i=0; i<4; i++) {
  test( 'ASC' );
  test( 'DESC' );
}

Results of sorting the test array multiple times:<br>
<xmp id="stdout"></xmp>