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

Posted

技术标签:

【中文标题】在 ReactJS 上使用 Lodash 对映射列表进行排序【英文标题】:Sort mapped list with Lodash on ReactJS 【发布时间】:2016-02-06 04:02:01 【问题描述】:

我有一个数组:

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 将不胜感激。

谢谢!

【问题讨论】:

【参考方案1】:

你需要先导入

import sortBy from "lodash/sortBy";

然后你可以像这样使用它

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

【讨论】:

【参考方案2】:

_.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

【讨论】:

【参考方案3】:

你可以像这样使用 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>
)

【讨论】:

以上是关于在 ReactJS 上使用 Lodash 对映射列表进行排序的主要内容,如果未能解决你的问题,请参考以下文章

在 Axios 请求上使用 Lodash 的 Debounce 会产生意想不到的结果

如何使用 JavaScript (lodash) 深度映射对象键?

使用 lodash 映射键或任何其他 javascript 方法 (NodeJs) 动态更改对象键

如何在 reactjs 中使用单个 ListItem 映射路由?

如何使用 reactjs 和 graphql 在 gatsby 中映射嵌套数组

Reactjs - 如何在 reactjs 材料表中加载和映射数据