javascript - 在 ReactJS 上使用 Lodash 对映射列表进行排序

Question

我有一个数组:

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