ReactJS:如何根据道具的值对对象数组进行排序?

Posted

技术标签:

【中文标题】ReactJS:如何根据道具的值对对象数组进行排序?【英文标题】:ReactJS: How do I sort an array of objects based on value of props? 【发布时间】:2015-12-27 23:47:22 【问题描述】:

我有一个 React 对象数组,我想根据其中一个道具的值对它们进行排序。

var arr=[];
arr[0] = <Fruit name="orange" count=10/>
arr[1] = <Fruit name"apple" count=5/>

是否有内置的 React 函数可用于按水果升序排列此数组count

【问题讨论】:

【参考方案1】:

如果要根据多个字段进行排序:- //使用 lodash

sortingFunction(arrayTobeSorted) 
let sortedResults = sortBy(arrayTobeSorted, function(e) 
return [e.field1.trim().toUpperCase(), e.field2.trim().toUpperCase()];
);

【讨论】:

【参考方案2】:

React 没有内置函数来处理这个问题(据我所知),但你可以使用 lodash 之类的东西来实现你想要的。我还建议您稍微更改数据结构。看看下面的例子。

// your data comes in like this  
var arr = [
    name: "orange", count: 10, 
    name: "apple", count: 5,
    name: "lemon", count: 11,
    name: "grape", count: 2
];

// order by ascending
var newArr = _.sortBy(arr, 'count', function(n) 
  return Math.sin(n);
);

// create your components
var fruits = newArr.map(function(fruit) 
   return(
      <Fruit name=fruit.name count=fruit.count />
   );
);

Here是一个fiddle来说明排序函数的输入输出

【讨论】:

谢谢@deowk。 Fiddle 也可以很好地处理字符串值。我们已经从 json 创建数组。只是想知道您为什么要为它创建地图。还有一个问题是我们项目中没有使用lodash。您能提出其他解决方案吗? @maxx777 当然,您不必使用 lodash 使用 sort() 函数可以使用纯 js 函数来实现相同的事情,至于 map 的使用 - 我经常使用它,因为它按插入顺序进行评估,从而确保顺序保持不变...;) 我在创建 React 元素之前对 json 进行了排序,this Question 帮助我对 JSON 数组进行了排序。谢谢@deowk

以上是关于ReactJS:如何根据道具的值对对象数组进行排序?的主要内容,如果未能解决你的问题,请参考以下文章

如何根据特定行中的值对 numpy 数组进行排序?

如何按对象中的值对数组进行排序

在 MongoDB 中,如何根据对象的值对对象进行排序?

我们如何根据节点js中的另一个对象数组值对对象数组进行排序

如何从 Reactjs 中的 useEffect 挂钩访问道具

如何在reactjs / javascript中按值对对象数组进行分组