在 <FlatList> 中打印对象值答案

【问题标题】：Print object values inside <FlatList>在 <FlatList> 中打印对象值
【发布时间】：2021-02-15 07:16:32
【问题描述】：

我将数据作为对象如下：

const allrptbyname =    {
                          "test1" : [
                                     {"id":11,"name":"test1","day":"MON","level":2}, 
                                     {"id":14,"name":"test1","day":"WED","level":4}
                                    ],
                           "test2" :[
                                     {"id":13,"name":"test2","day":"TUE","level":3}, 
                                     {"id":15,"name":"test2","day":"FRI","level":5}
                                     ]
                         }

我想在<FlatList> 中打印这些数据，我的 FlatList 如下所示：

<FlatList data={allrptbyname}
  renderItem={({ item }) => (
    <ListItem onPress={console.log("report clicked")/*() => onItemClickHandler(item)*/}>
      <Avatar.Icon color="#ffffff" backgroundColor='#ff9193' size={53} icon="file-excel" />
      <ListItem.Content>
        <ListItem.Title >
               {/* here the title will be test1, test2 and so one */}
        </ListItem.Title>
      </ListItem.Content>
     <ListItem.Chevron />
    </ListItem>
    )}
      keyExtractor={item => /* here the key will be these names test1,test1*/}
 />

此处是应用视图外观的示例

【问题讨论】：

标签： javascript react-native react-native-flatlist

【解决方案1】：

对于 FlatList，数据应该始终是一个数组。

请参考FlatList data 文档。

在您的示例中，allrptbyname 是一个对象。所以首先将其转换为数组，然后将其分配给您的 FlatList。

一旦完成，那么这样的事情应该可以工作，

<ListItem.Title>
     {item.name}
</ListItem.Title>

【讨论】：