Question

我正尝试在react-native中显示Expand / Collapse Flatlist数据。这就像有多个孩子的单亲家庭。因此，如果用户点击该单元格，则必须针对该展开/折叠显示多行。

但是，我正在从服务器获取数据，如下所示。

[{
    code: '1212',
    name: 'Bajaj Model 1',
    url: 'Some url',
    category: 'Bike'
  },
  {
    code: '1213',
    name: 'Bajaj Model 2',
    url: 'other url',
    category: 'Bike'
  },
  {
    code: '1454',
    name: 'BMW Model 1',
    url: 'Some url',
    category: 'Car'
  },
  {
    code: '1454',
    name: 'BMW Model 2',
    url: 'Some url',
    category: 'Car'
  }
]

因此，所有自行车数据，我都必须显示一个位置，例如“父母和孩子”。

为此，我完成了过滤。

  const fundsFilterData = mapValues(groupBy(response, 'category'),
    fundslist => fundslist.map(item => omit(item, 'category')));

我越来越喜欢。

{
  'Bike': [{
      code: '1212',
      name: 'Bajaj Model 1',
      url: 'Some url'
    },
    {
      code: '1213',
      name: 'Bajaj Model 2',
      url: 'other url'
    },
  ],
  'Car': [{
      code: '1454',
      name: 'BMW Model 1',
      url: 'Some url'
    },
    {
      code: '1454',
      name: 'BMW Model 2',
      url: 'other url'
    },
  ]
}

但是，我想将其与一些预添加的键（如以下）一起作为数组。

[{
    'Title': 'Bike',
    'Values': [{
        'code': '1212',
        'name': 'Bajaj Model 1',
        'url': 'Some url'
      },
      {
        'code': '1454',
        'name': 'Bajaj Model 2',
        'url': 'other url'
      }
    ]
  },
  {
    'Title': 'Car',
    'Values': [{
        'code": '
        1454 ',
        'name": '
        BMW Model 1 ',
        'url": '
        Some url '
      },
      {
        'code': '1454',
        'name': 'BMW Model 2',
        'url': 'Some url'
      }
    ]
  }
}

这样我可以在标题中显示标题，并且一旦用户点击行，我就可以将孩子的数据显示为展开状态。

有什么建议吗？

Answer 1

使用_.map()返回一个数组，而不返回_.mapValues()。在_.map()中，从第二个参数中获取Title（密钥）。使用它和值（_.omit()之后）为每个组构造一个对象。

const { map, groupBy, omit } = _;

const response = [{"code":"1212","name":"Bajaj Model 1","url":"Some url","category":"Bike"},{"code":"1213","name":"Bajaj Model 2","url":"other url","category":"Bike"},{"code":"1454","name":"BMW Model 1","url":"Some url","category":"Car"},{"code":"1454","name":"BMW Model 2","url":"Some url","category":"Car"}];

const fundsFilterData = map(
  groupBy(response, 'category'),
  (list, Title) => ({
    Title,
    Values: list.map(item => omit(item, 'category'))
  })
);

console.log(fundsFilterData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

如何构建多个字典以在React Native中进行数组

1 个答案: