Question

如何在Flatlist中呈现数据对象数组以响应本机？这是列表数据

const ListItem = [
  {

    'a5ab17kjsnx6179qoprea': {
      name: 'crystal',
      number: 1,
    },
    'b2ab1bc20kjsnx6179qoa': {
      name: 'barba',
      number: 2,
    },
  },
];

我在下面尝试了此操作，但注意到显示了

 <FlatList
        data={Object.keys(ListItem)}
        renderItem={({ item }) => {
          return (
            <View>
              <View>
                <Text style={{ fontSize: 16 }}>{ListItem[item].name}</Text>
                <Text style={{ fontSize: 16 }}>{ListItem[item].number}</Text>
              </View>
            </View>
          );
        }}
      />

Answer 1

Object.keys适用于不是数组而是

的对象

Object.keys(ListItem) // ListItem is an Array

而

Object.keys(ListItem(0)) //returns [ 'a5ab17kjsnx6179qoprea',''b2ab1bc20kjsnx6179qoa']

所以这应该可以正常工作，并尝试下面的代码

 <FlatList
        data={Object.keys(ListItem(0))}
        renderItem={({ item }) => {
          return (
            <View>
              <View>
                <Text style={{ fontSize: 16 }}>{ListItem[0][item].name}</Text>
                <Text style={{ fontSize: 16 }}>{ListItem[0][item].number}</Text>
              </View>
            </View>
          );
        }}
      />

Answer 2

只需更改此

data={Object.keys(ListItem)}

对此

data={Object.keys(ListItem[0])}

并访问诸如ListItem [0] [item] .name和ListItem [0] [item] .number之类的项目，而不是执行ListItem [item] .name等。

如何显示平面列表中的一组数据对象反应本机？

2 个答案: