时间戳

首页 > 解决方案 > 在 React Native SectionList 中合并相同的标题数据

reactjs - 在 React Native SectionList 中合并相同的标题数据

问题描述

在 React Native SectionList 中，您有这样的标题和数据数据（针对我的示例进行了修改）：

const DATA = [ { title: 'Main dishes', data: ['Pizza', 'Burger', 'Risotto'], }, { title: 'Sides', data: ['French Fries', 'Onion Rings', 'Fried Shrimps'], }, { title: 'Drinks', data: ['Water', 'Coke', 'Beer'], }, { title: 'Sides', data: ['Cheese Cake', 'Ice Cream'], }, ];

如您所见，有 2Sides个标题。有没有一种简单的方法来合并 2 个数组，data所以它看起来像这样：

data: ['French Fries', 'Onion Rings', 'Fried Shrimps', 'Cheese Cake', 'Ice Cream']

由于我的数据是随机输入的，因此可以通过这种方式输入数据。这是我的代码....

` fbDb.ref('job') .orderByChild('driver_key') .equalTo(global.session.user.key) .once('value', 快照 => {

        const result = [];
        let dayData = { title: "", data: [] };
        let data = snapshot.val();

        for (const [key, value] of Object.entries(data)) {
            const timestamp = data[key].status_rfc; //Get timestamp of completed time
            const date = moment(timestamp).format("YYYY MM"); //Change to 2020 02 for date sorting
            if (dayData.title === date) { //If date exists add it to that section header
                dayData.data.push(data[key]);
            } else { //Otherwise add as new entry
                dayData = { title: date, data: [data[key]] };
                result.push(dayData);
            }
        }    

        this._isMounted && this.setState({
            myData: result,
            loading: false,
        });

  });`

如您所见，它仅在数据已按日期排序时才有效。有没有一种简单的方法来对常见的标题进行分组？

谢谢

标签： reactjsreact-native

解决方案

你要求这个：

如您所见，有 2 个 Sides 标题。有没有一种简单的方法来合并 2 个数据数组，所以它看起来像这样：

数据：['French Fries'、'Onion Rings'、'Fried Shrimps'、'Cheese Cake'、'Ice Cream']

只需应用 javascript。

const DATA = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Sides',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

var filter_data = {};

DATA.forEach(e => {

  if(filter_data[e.title] != undefined){
    filter_data[e.title].data = [...filter_data[e.title].data, ...e.data]
  }else{
    filter_data[e.title] = e;
  }

});

var _data = Object.values(filter_data);
console.log(_data);

output:

[{"title":"Main dishes","data":["Pizza","Burger","Risotto"]},
{"title":"Sides","data":["French Fries","Onion Rings","Fried Shrimps","Cheese 
Cake","Ice Cream"]},{"title":"Drinks","data":["Water","Coke","Beer"]}]

推荐阅读