如何将我的数据格式化以适应React Native的SectionList？

Question

我有一个名为allPosts的数组，看起来像这样。

const allPosts = [
    {
      date: '2017-06-06',
      imageUrl: 'image1_06-06',
    },
    {
      date: '2017-06-06',
      imageUrl: 'image2_06-06',
    },
    {
      date: '2017-06-07',
      imageUrl: 'image1_06-07',
    },
    {
      date: '2017-06-07',
      imageUrl: 'image2_06-07',
    }
];

它需要按照这样的方式组织，以适应React Native的SectionList。

const postsByDate = [
    {
      data: [{ imageUrl: 'image1_06-06' }, { imageUrl: 'image2_06-06' }],
      key: '2017-06-06',
    },
    {
      data: [{ imageUrl: 'image1_06-07' }, { imageUrl: 'image2_06-07' }],
      key: '2017-06-07',
    },
];

我很难理解如何对每个日期的key进行深层次的data推送。

如果有影响，allPosts实际上具有更多的imageUrl，但为简单起见，我删除了额外的数据。

- GollyJer

Answer 1

我认为现在是时候学习如何使用map, filter,和reduce了，因为当你需要改变数据结构时，你会一直需要它们。这里有一个用reduce完成的非常简洁的解决方案：

const postsByDate = allPosts.reduce((acc, post) => {
  const foundIndex = acc.findIndex(element => element.key === post.date);
  if (foundIndex === -1) {
    return [
      ...acc, 
      {
        key: post.date,
        data: [{imageUrl: post.imageUrl}],
      },
    ];
  }
  acc[foundIndex].data = [...acc[foundIndex].data, {imageUrl: post.imageUrl}];
  return acc;
}, []);

- Henrik R

---

谢谢@henrik R！这正是我一直在尝试但未能成功的方法。我一回家就会试一下。 - GollyJer

工作得非常好，也教会了我很多。谢谢！ - GollyJer

很高兴听到这个。我建议观看这个播放列表，以了解更多关于功能性JavaScript编程的知识 :) https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84 - Henrik R

Answer 2

这是你想要的吗？

const allPosts = [
    {
      date: '2017-06-06',
      imageUrl: 'image1_06-06',
    },
    {
      date: '2017-06-06',
      imageUrl: 'image2_06-06',
    },
    {
      date: '2017-06-07',
      imageUrl: 'image1_06-07',
    },
    {
      date: '2017-06-07',
      imageUrl: 'image2_06-07',
    }
];
var keys = [];
var PostsByDate = [];
for (var i in allPosts){
    var date = allPosts[i].date;
    var temp_img = [];
    for(var j in allPosts){
        if(allPosts[j].date == date){
          temp_img.push({imageUrl:allPosts[j].imageUrl});
        }
     }
     var obj = {data:temp_img,key:date};
     PostsByDate.push(obj);
} 
console.log(PostsByDate);

- Dinesh undefined

Answer 3

试试这个

const allPosts = [
    {
        date: '2017-06-06',
        imageUrl: 'image1_06-06',
    },
    {
        date: '2017-06-06',
        imageUrl: 'image2_06-06',
    },
    {
        date: '2017-06-07',
        imageUrl: 'image1_06-07',
    },
    {
        date: '2017-06-07',
        imageUrl: 'image2_06-07',
    }
];


var o = {}
allPosts.map(item => {
    o[item.date] = o[item.date] || { key: item.date }
    if (o[item.date].data) {
        o[item.date].data.push({ imageUrl: item.imageUrl })
    } else {
        o[item.date].data = [{ imageUrl: item.imageUrl }]
    }
})

var PostByDate = Object.keys(o).map(val => {
    return o[val]
})

console.log(PostByDate)

- Priyesh Kumar