Question

我是react js and redux.的新手，在这里，我所拥有的是像

这样的对象数组

quizList = [ { createdDate : 1543314832505, id:5bfd1d90d4ed830001f589fc, name:'abc'}, { createdDate : 1543314152180, id:5bfd1ae8d4ed830001f589f8, name:'pqr'}, { createdDate : 1543308600920, id:5bfd1d90d4ed830001f589ssq, name:'qqq'} ]

现在，我在做什么，

<div className="col p-0">
   <div id="accordion">
      {
      props.quizList.map((data, index) => ( 
      <QuizInCollapse index={index + 1} data={data}/>
      ))
      }
      {/* first collapse end */}
   </div>
</div>

现在，在这里，我使用is，map传递一个对象。现在，在这里，我想做的是，

我想按createdDate和时间显示此列表，以便最新显示在顶部。

因此，这里的createdDate是具有时间戳的密钥。

所以我从中取了日期，例如

    let currentDate = new Date(props.quizList.createdDate);
    let createdDate =  currentDate.toDateString();
    let createdTime = currentDate.toLocaleTimeString();

但是之后呢？我现在是谁我该如何排序？

那么，有人可以帮我吗？

Answer 1

您需要在映射之前对数组进行排序，这是您的操作方法。您不需要将其转换为Date对象，因为排序纪元毫秒既简单又快速。

如果要撤消订购，请改用smallestToBiggest。

var quizList = [ 
  {createdDate : 1543314832505, id: '5bfd1d90d4ed830001f589fc', name:'abc'}, 
  {createdDate : 1543314152180, id: '5bfd1ae8d4ed830001f589f8', name:'pqr'}, 
  {createdDate : 1543308600920, id: '5bfd1d90d4ed830001f589ssq', name:'qqq'}
];

function smallestToBiggest(a, b) {
  return a.createdDate - b.createdDate;
}

function biggestToSmallest(a, b) {
  return b.createdDate - a.createdDate;
}

quizList.sort(biggestToSmallest);

// now you can map quizList
// it's already sorted
console.log(quizList);

参考：Array.sort

编辑

您可以这样使用它：

render() {
  const sortedList = props.quizList.sort((a, b) => b.createdDate - a.createdDate);

  return (
    <div className="col p-0">
      <div id="accordion">
        {sortedList.map((data, index) => (
          <QuizInCollapse
            index={index + 1}
            data={data}
          />
        ))}
      </div>
    </div>
  );
}

Answer 2

就像Array.map（）一样，您可以使用Array.sort()。 Array.sort（）带有两个参数（a和b）的回调函数（就像.map一样），可用于比较。比较函数的返回值可以是：

-1，a小于b
0，a = b
1，a大于b

这是一个例子。

function compareDatesInObjects(a, b) {
    const aCreatedDate = new Date(a.createdDate);
    const bCreatedDate = new Date(b.createdDate);
    if (aCreatedDate < bCreatedDate)
        return -1;
    if (aCreatedDate > bCreatedDate)
        return 1;
    return 0;
}

const sorted = quizList.sort(compareDatesInObjects);
// and because sort() returns an array, you can even chain the Array functions.
const mappedAndSorted = quizList.sort(compareDatesInObjects).map(/* ... */);

Answer 3

您可以使用.mat-sidenav { width: 200px; }方法对数组进行排序，并使用Array.sort呈现排序后的数组。排序操作不应在map方法中进行，而应在render()或componentDidMount中进行，已排序的数组应存储在组件的状态中，并且应使用状态变量进行渲染getDerivedStateFromProps方法中的数组。

根据时间和创建日期对对象数组进行排序

3 个答案:

编辑