在本机反应中使用对象数组渲染项目平面列表答案

【问题标题】：render item flatlist with array of object in react native在本机反应中使用对象数组渲染项目平面列表
【发布时间】：2021-02-26 07:05:32
【问题描述】：

新反应原生我有这个对象数组。我想用 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,
      },
    ],
  };

【问题讨论】：

标签： javascript arrays react-native

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

【讨论】：

【解决方案2】：

假设你要渲染datetime数据，你需要映射到keyExtractor，只要它接收到另一个数组，那么你可以这样做：

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

【讨论】：