在 React 中对对象数组进行排序并渲染它们答案

【问题标题】：Sort an array of objects in React and render them在 React 中对对象数组进行排序并渲染它们
【发布时间】：2017-09-20 05:03:51
【问题描述】：

我有一个包含一些信息的对象数组。我无法按照我想要的顺序渲染它们，我需要一些帮助。我这样渲染它们：

this.state.data.map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

是否可以在 map() 函数中使用 item.timeM 对它们进行升序排序，还是在使用 map 之前必须对它们进行排序？

【问题讨论】：

您必须在使用map 方法之前对其进行排序。
@Oen44 是对的。但是要知道逻辑和函数（映射和排序）不是特定于 React 的，它们是普通的 JS 构造！

标签： javascript reactjs

【解决方案1】：

这可能是您正在寻找的：

// ... rest of code

// copy your state.data to a new array and sort it by itemM in ascending order
// and then map 
const myData = [].concat(this.state.data)
    .sort((a, b) => a.itemM > b.itemM ? 1 : -1)
    .map((item, i) => 
        <div key={i}> {item.matchID} {item.timeM}{item.description}</div>
    );

// render your data here...

方法 sort will mutate the original array 。因此，我使用concat 方法创建了一个新数组。 itemM 字段上的排序应该适用于字符串和数字等可排序实体。

【讨论】：

我认为.sort((a, b) => a.itemM > b.itemM) 在这里不正确（这真的让我失望了......）。如果itemM 是数字，它应该是.sort((a, b) => a.itemM - b.itemM)，对吧？
如果 itemM 不是数字，它需要更像这样：.sort((a, b) => a.item.timeM > b.item.timeM ? 1:-1)
很好的答案。 .localeCompare()，例如b.item.timeM.localeCompare(b.item.timeM)

【解决方案2】：

您需要在映射对象之前对其进行排序。并且可以使用带有自定义比较器定义的 sort() 函数轻松完成，例如

var obj = [...this.state.data];
obj.sort((a,b) => a.timeM - b.timeM);
obj.map((item, i) => (<div key={i}> {item.matchID}  
                      {item.timeM} {item.description}</div>))

【讨论】：

【解决方案3】：

this.state.data.sort((a, b) => a.item.timeM > b.item.timeM).map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

【讨论】：

【解决方案4】：

试试 lodash sortBy

import * as _ from "lodash";
_.sortBy(data.applications,"id").map(application => (
    console.log("application")
    )
)

阅读更多：lodash.sortBy

【讨论】：

【解决方案5】：

Chrome 浏览器将整数值视为返回类型而不是布尔值所以，

this.state.data.sort((a, b) => a.item.timeM > b.item.timeM ? 1:-1).map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

【讨论】：

【解决方案6】：

const list = [
  { qty: 10, size: 'XXL' },
  { qty: 2, size: 'XL' },
  { qty: 8, size: 'M' }
]

list.sort((a, b) => (a.qty > b.qty) ? 1 : -1)

console.log(list)

输出：

[
  {
    "qty": 2,
    "size": "XL"
  },
  {
    "qty": 8,
    "size": "M"
  },
  {
    "qty": 10,
    "size": "XXL"
  }
]

【讨论】：

这与问题中所问的 React 无关。

【解决方案7】：

这种方法对我有用

const list = [
  { price: 10, plan: 'a' },
  { price: 2, plan: 'b' },
  { price: 8, plan: 'c' }
];
this.setState({ planList: list.sort((a,b)=> a.membership_plan_initial_price-b.membership_plan_initial_price)  });


render(){
   return(){
      <div>
          this.state.planList !== undefined && this.state.planList !== null && 
          this.state.planList !== '' && this.state.planList.map((ele, index) => {
              return (
                 <div key={index}> {ele.price}{ele.plan}</div>
              )
          })
      </div>
  }
}

谢谢

【讨论】：

【解决方案8】：

this.state.data.sort((a, b) => a.objKey > b.objKey ? 1:-1).map((objKey, index))

【讨论】：