在本机反应中呈现带有 object 数组的项目平面列表

Question

新反应原生我有这个对象数组。 我想用 Flatlist 按日期 map 这个数据。 谁能帮我？ 谢谢你：）

const data = {
    '21 Jan 2021': [
      {
        id: 96,
        name: 'Received​ PK19995',
        datetime: '21 Jan 2021 10:00 AM',
        amount: 40,
      },
      {
        id: 95,
        name: 'Received​ PK12355',
        datetime: '21 Jan 2021 9:00 AM',
        amount: 40,
      },
      {
        id: 94,
        name: 'Received PK12333',
        datetime: '21 Jan 2021 8:00 AM',
        amount: 1340,
      },
    ],
    '20 Jan 2021': [
      {
        id: 93,
        name: 'Received​ PK10045',
        datetime: '20 Jan 2021 8:00 AM',
        amount: 40,
      },
    ],
  };

Answer 1

格式化您的数据以便能够像这样在 FlatList 中使用它

 const data = { '21 Jan 2021': [{ id: 96, name: 'Received PK19995', datetime: '21 Jan 2021 10:00 AM', amount: 40, }, { id: 95, name: 'Received PK12355', datetime: '21 Jan 2021 9:00 AM', amount: 40, }, { id: 94, name: 'Received PK12333', datetime: '21 Jan 2021 8:00 AM', amount: 1340, }, ], '20 Jan 2021': [{ id: 93, name: 'Received PK10045', datetime: '20 Jan 2021 8:00 AM', amount: 40, }, ], }; const refinedData = Object.keys(data).map(key => data[key].map(v => ({...v, date: key }))).flat() console.log(refinedData)

Answer 2

假设您要渲染datetime时间数据，则需要在 keyExtractor 中输入keyExtractor ，只要它接收另一个数组，那么您可以这样做：

return (
  <SafeAreaView>
    <FlatList
      data={Object.values(DATA)}
      renderItem={renderItem}
      keyExtractor={item => item.map(i => i.datetime)}
    />
  </SafeAreaView>
);