React项目中使用moment与lodash实现日期升/降序排序失效求助

我看了你的代码，问题出在对lodash _.orderBy的用法理解有误，你的排序函数逻辑完全颠倒了，所以才会导致排序无效。咱们一步步来修正：

问题分析 #

你定义的sortByAsc和sortByDesc函数，错误地把单个item作为_.orderBy的第一个参数，但_.orderBy的第一个参数应该是要排序的数组，而不是单个元素。之后在sortedAscList里调用_(newBackorders).orderBy(sortByAsc)也不对，这里的参数应该是排序用的迭代器函数，而不是一个返回排序结果的函数。

修正后的代码 #

直接简化你的排序逻辑，不需要额外定义sortByAsc和sortByDesc，在排序函数里直接正确调用_.orderBy即可：

const items = { 
  pageNumber: 1, 
  totalPages: 1, 
  content: [
    { id: 8, created: "2020-10-14T15:05:48.427601Z", actor: "Anonymous", rangeStart: "2020-10-14T11:54:05.610220Z", rangeEnd: "2020-10-14T15:05:48.461905Z", state: "InProgress", amountOrderIds: 0, amountOrderDetails: 0 }, 
    { id: 3, created: "2020-8-11T11:54:05.610220Z", actor: "houman", rangeStart: "2020-10-11T11:54:05.610220Z", rangeEnd: "2020-10-14T11:54:05.610220Z", state: "Finished", amountOrderIds: 0, amountOrderDetails: 0 }, 
    { id: 2, created: "2020-9-10T11:53:40.262608Z", actor: "mo", rangeStart: "2020-10-10T11:53:40.262608Z", rangeEnd: "2020-10-11T11:53:40.262608Z", state: "Finished", amountOrderIds: 0, amountOrderDetails: 0 }, 
    { id: 1, created: "2020-10-09T11:53:25.911596Z", actor: "leo", rangeStart: "2020-10-09T11:53:25.911596Z", rangeEnd: "2020-10-10T11:53:25.911596Z", state: "Finished", amountOrderIds: 0, amountOrderDetails: 0 } 
  ] 
};

// 升序排序：按created字段的日期从小到大排列
const sortedAscList = (backorders) => {
  // 深拷贝原数组，避免修改原数据
  const newBackorders = _.cloneDeep(backorders);
  // _.orderBy参数：要排序的数组，排序迭代器（转换为moment日期对象），排序方向
  return _.orderBy(newBackorders, item => moment(item.created), 'asc');
};

// 降序排序：按created字段的日期从大到小排列
const sortedDescList = (backorders) => {
  const newBackorders = _.cloneDeep(backorders);
  return _.orderBy(newBackorders, item => moment(item.created), 'desc');
};

console.clear();
console.log('----------sortByAsc------------');
console.log(sortedAscList(items.content));
console.log('----------sortByDesc------------');
console.log(sortedDescList(items.content));

关键说明 #

1. _.orderBy的正确用法：第一个参数是需要排序的数组，第二个参数是用来生成排序依据的函数（这里把created字符串转成moment日期对象，moment对象可以直接比较大小），第三个参数是排序方向（asc升序，desc降序）。
2. 深拷贝的作用：使用_.cloneDeep是为了避免排序操作修改原数组的数据，保持原数据的纯净性。
3. moment日期解析：moment可以正确解析你提供的ISO格式日期字符串（包括月份/日期是单个数字的情况），所以不需要额外处理格式。

现在运行修正后的代码，就能得到正确的日期升降序排序结果了。

内容的提问来源于stack exchange，提问作者Mo.