反应虚拟化表格排序问题

Question

我使用的反应虚拟化的表，我有一个关于排序的一些问题。

首先，包含数字的一些列需要数字排序，比如我想这[1，200，10500，29000]，而不是这个[1，10500，200，29000]。我怎样才能通过数字排序某些列？

有关排序的另一个问题是这样的：

Bucharest
Bucharest
Bucuresti
IASI
Oradea
ARAD
BRASOV
BUCHAREST
BUCHAREST
Bucharest
Bucharest
Bucharest

这里发生了什么？第一和最后一个“布加勒斯特”字符串相同。

这里是我的代码：

import { items } from 'model/component-props';
import _ from 'lodash';

class Items extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        sortBy: 'No',
        sortDirection: 'ASC',
    }
}

sort = ({sortBy, sortDirection}) => {
  console.log({sortBy, sortDirection})
  this.setState({
    sortBy,
    sortDirection,
  })
}

render(){
  const { items } = this.props;
  const simplifiedData = items && _.get(items, ['Soap:Envelope', 'Soap:Body', 'ReadMultiple_Result', 'ReadMultiple_Result', 'ItemList']);
  const beautifiedData = _.map(simplifiedData, simple => _.reduce(simple, (r, value, key) => ({
      ...r,
      [key]: value['_text']
    }), {}));
  const searchKeysList = ['No', 'Description', 'TranslateDescr', 'Inventory', 'Special_Weight', 'Composition', 'Width', 'Unit_Price'];
  const filteredData = beautifiedData && beautifiedData.filter(obj =>
      _.has(obj, itemSearchKey) && _.includes(obj[itemSearchKey].toLowerCase(), itemSearchTerm.toLowerCase()));

  const tempList = _.sortBy([...filteredData], d => d[this.state.sortBy]);
  const list = this.state.sortDirection === 'DESC' ? tempList.reverse() : tempList;


  return (
    <div>
     <Table 
       style={{paddingTop: '20px'}}
       rowStyle={{border: '0.5px dashed grey'}}
       width={1400}
       height={400}
       headerHeight={35}
       rowHeight={30}
       rowCount={list.length}
       rowGetter={({ index }) => list[index]}
       sortBy={this.state.sortBy}
       sortDirection={this.state.sortDirection}
       sort={this.sort}
       onRowClick={({ rowData }) => this.onItemCardClick(rowData.No)}
    >
       <Column
         label={content[langProp].ID}
         dataKey= 'No'
         width={150}
       />
       <Column
         style={{textAlign: 'right'}}
         label={content[langProp].Inventory}
         headerStyle={{textAlign: 'right'}}
         cellDataGetter={({ rowData }) => parseFloat(rowData.Inventory).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
          dataKey='Inventory'
          disableSort='true'
          width={200}
        />
        <Column
          label={content[langProp].City}
          dataKey='City'
          width={200}
        />
     </Table>
   </div>
);

任何帮助将非常感激。

Answer 1

如果你运行

var users = [
  { 'age': 315 },
  { 'age': 34 }
];

var result = _.sortBy(users, u => u.age);

你会发现，它返回{age: 34}, {age: 315}]，让您的数字问题，不应该存在......我猜的价值实际上是被存储在这种情况下，你可以运行一个正则表达式来检查字符串应该是一个字符串在iteratee喜欢这个号码

var result = _.sortBy(data, d => {
    const str = d[this.state.sortBy];
    var patt = new RegExp("^\d+$");
    if(patt.test(str)) {
      return Number.parseInt(str)
    }
    return str;
  }
});