排序上ReactJS

Question

映射列表与Lodash我有一个数组：

people = [ 
    { 
    name: "Kyle", 
    _id: "2" 
    }, 
    { 
    name: Susan, 
    _id: "1" 
    } 
] 

我有一个映射列表，例如：

return (
    <ul> 
    {people.map((person) => { 
     return (
     <li> 
      <span>{person.name}</span> 
      <span>{person.id}</span> 
     </li> 
     ) 
    })} 
    </ul> 
) 

这一切运作良好，但我怎么能对它们进行排序，基于“名称”说？我试图使用[_.sortBy][1]，但无法弄清楚它如何适合React和map函数的上下文。使用lodash或下划线的_.sortBy将不胜感激。

谢谢！

Answer 1

在_.sortBy可以传递将用于排序您的收藏领域的名称，了解更多关于_.sortBy

var Component = React.createClass({ 
    getInitialState() { 
     return { 
      people: _.sortBy([ 
       { name: "Kyle", _id: 2}, 
       { name: "Susan", _id: 1} 
      ], '_id') 
     } 
    }, 

    sortBy(field) { 
     this.setState({ 
      people: _.sortBy(this.state.people, field) 
     }); 
    }, 

    render: function() { 
     var peopleList = this.state.people.map((person, index) => { 
      return (<li key={index}> 
       <span>{person.name}</span> 
       <span>{person.id}</span> 
      </li>);   
     }) 

     return <div> 
      <a onClick={this.sortBy.bind(this, '_id')}>Sort By Id</a> | 
      <a onClick={this.sortBy.bind(this, 'name')}>Sort By Name</a> 
      <ul>{peopleList}</ul> 
     </div>; 
    } 
}); 

Example

Answer 2

可以使用sortBy这样的：

_.sortBy(<array name here>, '<key here>') 

尝试

return (
    <ul> 
     {_.sortBy(people, 'name').map((person) => { 
      return (
       <li> 
        <span>{person.name}</span> 
        <span>{person.id}</span> 
       </li> 
      ) 
     })} 
    </ul> 
) 

Answer 3

您需要导入它首先

import sortBy from "lodash/sortBy"; 

然后你就可以使用它像

const arr = [{id: 2}, {id: 0}]; 
sortBy(arr, "id");