如何在 React Native 中构造多个字典来排列

Question

我正在尝试在 react-native 中显示 Expand/Collapse Flatlist 数据。就像单个 parent 和多个 child 一样。因此，如果用户点击单元格，我必须为该单元格显示多行 expand/collapse。

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

[{
    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'
  }
]

所以，所有 Bike 数据，我必须显示一个地方，例如 Parent 和 child。

为此我做了过滤。

  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'
      }
    ]
  }
}

这样我就可以在 headers 中显示标题，一旦用户点击行，我就可以展开显示 child 的数据。

有什么建议吗？

Answer 1

使用 _.map() 其中 returns 一个数组，而不是 _.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 中构造多个字典来排列

How to construct multiple dictionaries to array in react native

arrays

dictionary

lodash

react-native

react-native-flatlist