我正在尝试使用我创建的react函数基于键和值参数对对象数组进行排序

时间:2019-03-11 05:00:00

标签: javascript arrays reactjs sorting

我在数组中有一个用户对象列表。我想根据选定的参数(例如年龄,等级等)对数组中的不同用户进行排序。我创建了一些函数,这些函数将用于让用户选择如何对用户进行排名。我正在尝试进行过滤功能,但它们没有按我预期的那样工作。这是我的react组件:

export default class Table extends Component {
    constructor(props) {
        super(props);
        this.state = {
            users: usersJSON,
            sort: this.props.filter
        }
        console.log(this.state.users)
    }

    componentWillReceiveProps() {

    }

    // complete the comparators
    compareByAge(a, b) {

    }

    compareByName(a, b) {

    }

    compareByPoints(a, b) {

    }

    compareByRank(a, b) {

    }

    render() {

        return (<div>
            <table className='table table-striped'>
                <thead>
                    <tr key='head'>
                        <th>Age</th>
                        <th>Name</th>
                        <th>Points</th>
                        <th>Rank</th>
                    </tr>
                </thead>
                <tbody>
                {
                    this.state.users.map((user, index) => {
                        return(
                            <tr key={index}>
                                <td>{user.age}</td>
                                <td>{user.name}</td>
                                <td>{user.points}</td>
                                <td>{user.rank}</td>
                            </tr>
                        )
                    })
                }
                </tbody>
            </table>
        </div>)
    }
}

我尝试过:

    compareByAge(a, b) {
    if(a < b){
        return -1
    }
    if(a = b){
        return 0
    }
    if(a > b){
        return 1
    }
}

compareByName(a, b) {
    if(a < b){
        return -1
    }
    if(a = b){
        return 0
    }
    if(a > b){
        return 1
    }
}

compareByPoints(a, b) {
    if(a < b){
        return -1
    }
    if(a = b){
        return 0
    }
    if(a > b){
        return 1
    }
}

compareByRank(a, b) {
    if(a < b){
        return -1
    }
    if(a = b){
        return 0
    }
    if(a > b){
        return 1
    }
}

这是用户对象

[ { rank: 3, points: 3123, name: 'Marlana J. Huff', age: 41 },                                                                                                                                                                                                                                                                                                 
  { rank: 10, points: 45345, name: 'Susan D. Jimenez', age: 42 },                                                                                                                                                                                                                                                                                              
  { rank: 14, points: 312, name: 'Richard M. Mass', age: 11 },                                                                                                                                                                                                                                                                                                 
  { rank: 13, points: 3124, name: 'Joan T. Covert', age: 13 },                                                                                                                                                                                                                                                                                                 
  { rank: 20, points: 31, name: 'Joseph S. Perez', age: 23 },                                                                                                                                                                                                                                                                                                  
  { rank: 19, points: 6546, name: 'John R. Green', age: 24 },                                                                                                                                                                                                                                                                                                  
  { rank: 9, points: 452, name: 'Elizabeth R. Olsen', age: 15 },                                                                                                                                                                                                                                                                                               
  { rank: 1, points: 134, name: 'Sharon R. Ryan', age: 25 },                                                                                                                                                                                                                                                                                                   
  { rank: 24, points: 64563, name: 'Stacey D. Ward', age: 30 },                                                                                                                                                                                                                                                                                                
  { rank: 2, points: 755463, name: 'George K. Pancoast', age: 35 },                                                                                                                                                                                                                                                                                            
  { rank: 18, points: 42342, name: 'Dorothy J. Carroll', age: 33 },                                                                                                                                                                                                                                                                                            
  { rank: 23, points: 1241, name: 'Louis E. McCrae', age: 65 },                                                                                                                                                                                                                                                                                                
  { rank: 15, points: 654645, name: 'Camille B. Burton', age: 17 },                                                                                                                                                                                                                                                                                            
  { rank: 4, points: 5345345, name: 'Tommye R. Robinson', age: 18 },                                                                                                                                                                                                                                                                                           
  { rank: 17, points: 342, name: 'Grace C. Smith', age: 19 },                                                                                                                                                                                                                                                                                                  
  { rank: 22, points: 213, name: 'Jennifer C. West', age: 20 },                                                                                                                                                                                                                                                                                                
  { rank: 25, points: 34242, name: 'John L. Sandlin', age: 21 },                                                                                                                                                                                                                                                                                               
  { rank: 21, points: 52342, name: 'Margarita D. Lambert', age: 43 },                                                                                                                                                                                                                                                                                          
  { rank: 5, points: 42342, name: 'Thomas M. Hawkins', age: 32 },                                                                                                                                                                                                                                                                                              
  { rank: 8, points: 354, name: 'Joseph J. Freeman', age: 22 },                                                                                                                                                                                                                                                                                                
  { rank: 6, points: 7675, name: 'Arlene R. Grimes', age: 29 },                                                                                                                                                                                                                                                                                                
  { rank: 7, points: 274, name: 'Michael E. Rogers', age: 10 },                                                                                                                                                                                                                                                                                                
  { rank: 12, points: 105, name: 'Alice J. Goldsmith', age: 37 },                                                                                                                                                                                                                                                                                              
  { rank: 16, points: 18978, name: 'Robert O. Lambert', age: 40 },                                                                                                                                                                                                                                                                                             
  { rank: 11, points: 103596, name: 'Felix M. Seeber', age: 39 } ]          

2 个答案:

答案 0 :(得分:0)

如果您希望默认情况下按年龄对它进行排序,则可以直接将其设置为以下状态:

this.state = {
            users: usersJSON.sort(this.compareByAge),
            sort: this.props.filter
        }

尝试使用此功能

compareByName(a, b) {
    if(a.name < b.name){
        return -1
    }
    if(a.name == b.name){ // you were making mistake here by a = b instead of a==b
        return 0
    }
    if(a.name > b.name){
        return 1
    }
}

compareByAge(a, b) {
    if(a.age < b.age){
        return -1
    }
    if(a.age == b.age){
        return 0
    }
    if(a.age > b.age){
        return 1
    }
}

compareByPoints(a, b) {
    if(a.points < b.points){
        return -1
    }
    if(a.points == b.points){
        return 0
    }
    if(a.points > b.points){
        return 1
    }
}

compareByRank(a, b) {
    if(a.rank < b.rank){
        return -1
    }
    if(a.rank == b.rank){
        return 0
    }
    if(a.rank > b.rank){
        return 1
    }
}

答案 1 :(得分:0)

下面的功能代码通过 currying 调用一系列功能。因此语法看起来有些奇怪。要使用此功能代码,请先调用sort,然后再调用两组括号。第一组包含对数据数组的引用,第二组包含表示要排序的“键”的字符串。一旦获得排序后的数据,就可以使用setState()将排序后的列表放入您的users状态变量中。

因此sort(data)('name');将通过键data对名为name的对象数组进行排序。您将在下面的console.log()中看到函数调用:

const data = [ { rank: 3, points: 3123, name: 'Marlana J. Huff', age: 41 },                                                               { rank: 10, points: 45345, name: 'Susan D. Jimenez', age: 42 },                                                                         { rank: 14, points: 312, name: 'Richard M. Mass', age: 11 },                                                                             { rank: 13, points: 3124, name: 'Joan T. Covert', age: 13 },                                                                             { rank: 20, points: 31, name: 'Joseph S. Perez', age: 23 },                                                                             { rank: 19, points: 6546, name: 'John R. Green', age: 24 },                                                                             { rank: 9, points: 452, name: 'Elizabeth R. Olsen', age: 15 },                                                                           { rank: 1, points: 134, name: 'Sharon R. Ryan', age: 25 },                                                                               { rank: 24, points: 64563, name: 'Stacey D. Ward', age: 30 },                                                                           { rank: 2, points: 755463, name: 'George K. Pancoast', age: 35 },                                                                       { rank: 18, points: 42342, name: 'Dorothy J. Carroll', age: 33 },                                                                       { rank: 23, points: 1241, name: 'Louis E. McCrae', age: 65 },                                                                           { rank: 15, points: 654645, name: 'Camille B. Burton', age: 17 },                                                                       { rank: 4, points: 5345345, name: 'Tommye R. Robinson', age: 18 },                                                                       { rank: 17, points: 342, name: 'Grace C. Smith', age: 19 },                                                                             { rank: 22, points: 213, name: 'Jennifer C. West', age: 20 },                                                                           { rank: 25, points: 34242, name: 'John L. Sandlin', age: 21 },                                                                           { rank: 21, points: 52342, name: 'Margarita D. Lambert', age: 43 },                                                                     { rank: 5, points: 42342, name: 'Thomas M. Hawkins', age: 32 },                                                                         { rank: 8, points: 354, name: 'Joseph J. Freeman', age: 22 },                                                                           { rank: 6, points: 7675, name: 'Arlene R. Grimes', age: 29 },                                                                           { rank: 7, points: 274, name: 'Michael E. Rogers', age: 10 },                                                                           { rank: 12, points: 105, name: 'Alice J. Goldsmith', age: 37 },                                                                         { rank: 16, points: 18978, name: 'Robert O. Lambert', age: 40 },                                                                         { rank: 11, points: 103596, name: 'Felix M. Seeber', age: 39 } ]          

let sort = (data) => (key) => [...data].sort((first, second) => first[key] > second[key]);

console.log(sort(data)('rank'));
console.log(sort(data)('points'));
console.log(sort(data)('name'));
console.log(sort(data)('age'));