如何将我的数据转换为 React Native 的 SectionList 的正确格式？答案

【问题标题】：How do I get my data into the correct format for React Native's SectionList?如何将我的数据转换为 React Native 的 SectionList 的正确格式？
【发布时间】：2017-05-30 17:49:26
【问题描述】：

我有一个看起来像这样的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，但为了简单起见，我删除了额外的数据。

【问题讨论】：

标签： javascript arrays react-native javascript-objects

【解决方案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！这是我没有成功的道路。我一回到家就试试这个。
效果很好，教会了我很多东西。谢谢！！
很高兴听到。我建议观看此播放列表以了解有关功能性 javascript 编程的更多信息 :) youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84

【解决方案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 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)

【讨论】：

【解决方案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 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);

【讨论】：