ReactJS:我如何排序基于道具值的对象数组

ReactJS: How do I sort an array of objects based on value of props?

本文关键字：于道具 数组 对象 排序 何排序 ReactJS      更新时间：2023-09-26

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

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

是否有内置的React函数，我可以用它来排序这个数组在水果count升序?

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} />
   );
});

下面是演示排序函数输入和输出

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

sortingFunction(arrayTobeSorted) {
let sortedResults = sortBy(arrayTobeSorted, function(e) {
return [e.field1.trim().toUpperCase(), e.field2.trim().toUpperCase()];
});
相关文章：