如何将对象数组转换为SectionList

Question

我有一个来自API服务的以下数组结构

[
  {
    id: 1001,
    orderNo: 'abc',
    customer: 'John',
    date: 1524526218641
  },
  {
    id: 1002,
    orderNo: 'def',
    customer: 'Ringo',
    date: 1524555627191
  },
  {
    id: 1003,
    orderNo: 'ghi',
    customer: 'George',
    date: 1524555662611
  },
  {
    id: 1004,
    orderNo: 'jkl',
    customer: 'Paul',
    date: 1524717318641
  }
]

根据React Native文档，我需要将API服务返回的原始数组结构转换为：

[
  {
    title: '23/4/2018',
    data: [
      {
        id: 1001,
        orderNo: 'abc',
        customer: 'John',
        date: 1524526218641
      }
    ]
  },
  {
    title: '24/4/2018',
    data: [
      {
        id: 1002,
        orderNo: 'def',
        customer: 'Ringo',
        date: 1524555627191
      },
      {
        id: 1003,
        orderNo: 'ghi',
        customer: 'George',
        date: 1524555662611
      }
    ]
  },
  {
    title: '25/4/2018',
    data: [
      {
        id: 1004,
        orderNo: 'jkl',
        customer: 'Paul',
        date: 1524717318641
      }
    ]
  }
]

对于标题部分，我使用以下函数：toLocaleDateString

我认为我可以使用数组方法reduce，但我还没有成功创建所需的结构

- user9702215

---

试一试吧，伙计。 - Jagdeep Singh

如果你想根据日期对data对象进行分组，那么你需要手动遍历该组。 - user1496463

Answer 1

使用 reduce 和 find 方法。

const data = [
  {
    id: 1001,
    orderNo: 'abc',
    customer: 'John',
    date: 1524526218641
  },
  {
    id: 1002,
    orderNo: 'def',
    customer: 'Ringo',
    date: 1524555627191
  },
  {
    id: 1003,
    orderNo: 'ghi',
    customer: 'George',
    date: 1524555662611
  },
  {
    id: 1004,
    orderNo: 'jkl',
    customer: 'Paul',
    date: 1524717318641
  }
]
let res = data.reduce((re, o) => {  
  let existObj = re.find(
    obj => obj.title === new Date(o.date).toLocaleDateString()
  )

  if (existObj) {
    existObj.data.push(o)
  } else {
    re.push({
      title: new Date(o.date).toLocaleDateString(),
      data: [o]
    })
  }
  return re
}, [])

console.log(res)

- xianshenglu

---

遗憾的是，这样做不起作用。他想要在日期相同的情况下对其进行分组。 - user1496463

@user1496463，抱歉我的疏忽，现在已经更新了，请您检查一下。 - xianshenglu