Question

我想在React Native中使用SectionList。 SectionList需要呈现的数据如下所示：

sections=[
 {
   date: 'May 24 2019', 
   data: [
     {
       id:1,
       msg: 'msg1',
       date: 'May 24 2019'
     },
     {
       id:2,
       msg: 'msg2',
       date: 'May 24 2019'
     },
 ]},
 {
   date: 'May 25 2019', 
   data: [
     {
       id:3,
       msg: 'msg1',
       date: 'May 25 2019'
     },
     {
       id:4,
       msg: 'msg2',
       date: 'May 25 2019'
     },
 ]},
];

但是我从服务器收到的数据看起来像这样：

data:[
  {
       id:1,
       msg: 'msg1',
       date: 'May 24 2019'
  },
  {
       id:2,
       msg: 'msg2',
       date: 'May 24 2019'
  },
  {
       id:3,
       msg: 'msg1',
       date: 'May 25 2019'
  },
  {
       id:4,
       msg: 'msg1',
       date: 'May 25 2019'
  },
];

因此，如何将“数据”转换为“节”。我感谢您的帮助。对不起，我的英语。

Answer 1

您可以按照以下步骤进行操作：

使用reduce()构建一个对象，其键将具有不同的日期，并且值将是包含项的数组
然后使用Object.values()获取该对象的值
然后在其上使用map()并添加其他属性date并返回对象。

const data = [ { id:1, msg: 'msg1', date: 'May 24 2019' }, { id:2, msg: 'msg2', date: 'May 24 2019' }, { id:3, msg: 'msg1', date: 'May 25 2019' }, { id:4, msg: 'msg1', date: 'May 25 2019' }, ]

const res = Object.values(
                  data.reduce((ac,a) => (ac[a.date] = (ac[a.date] || []).concat(a),ac),{})
             ).map(x => ({data:[...x],date:x[0].date}))

console.log(res)

Answer 2

您可以使用Array.reduce创建实际的分组，然后通过Object.values提取值：

let data = [ { id:1, msg: 'msg1', date: 'May 24 2019' }, { id:2, msg: 'msg2', date: 'May 24 2019' }, { id:3, msg: 'msg1', date: 'May 25 2019' }, { id:4, msg: 'msg1', date: 'May 25 2019' }, ];

let result = data.reduce((r,{ date, ...other}) => {
  r[date] = r[date] || { date, data: [] }
  r[date].data = [...r[date].data, { date, ...other }]
  return r
}, {})

console.log(Object.values(result))

Answer 3

let data = [
    {
        id: 1,
        msg: 'msg1',
        date: 'May 24 2019'
    },
    {
        id: 2,
        msg: 'msg2',
        date: 'May 24 2019'
    },
    {
        id: 3,
        msg: 'msg1',
        date: 'May 25 2019'
    },
    {
        id: 4,
        msg: 'msg1',
        date: 'May 25 2019'
    },
];

let result = {}

data.map(val=>{
    if(result[val.date]){
        return result[val.date] = {...result[val.date], value: [...result[val.date].value, val]}
    }else{
        return result[val.date] = {date: val.date, value: [val]}
    }
})

console.log(Object.values(result));

如何将数组中的对象放入按日期排序的新数组中？

3 个答案: