Question

我想显示cluster1的平面列表数组只有a，b，c，d，e而不影响群集2.我想显示只有群集1的平面列表，但我不知道如何。

这是我的数据

    const Cluster = [
    {cluster1: [
      {
        name: 'a'
      },
      {
        name: 'b'
      },
      {
        name: 'c'
      },
      {
        name: 'd'
      },
      {
        name: 'e'
      },
    ]
  },

  {cluster2: [
    {
      name: 'h'
    },
    {
      name: 'i'
    },
    {
      name: 'j'
    },
    {
      name: 'k'
    },
    {
      name: 'l'
    }
  ]
}   
]
module.exports = { Cluster: Cluster };

这是我的单位代码

class Flatlist extends Component{
render(){
    const { navigate } = this.props.navigation;
    return(
        <ScrollView>
        <FlatList
        numColumns= {2}
        data={Cluster}
        renderItem={({item,index})=>{
            return(
                <FlatListItem item={item} index={index}>

                </FlatListItem>);
        }}
        >
        </FlatList>
        </ScrollView>
    );
}

FlatlistItem

class FlatListItem extends Component{
render(){
    return(
        <View style={styles.list}>
        <View>


        <Text style={styles.itemText}>{this.props.item.name}</Text>

        </View>
        </View>
    );
}

基本上，我想在群集1的数组中显示字母表。我希望有人能够帮助我解决这个问题

Answer 1

您的问题更多是过滤数组以查找特定对象。所以这是我的方法 - 首先在Cluster数组中找到所需的集群。我假设它存在。可以进行必要的错误处理。

const getClusterByName = (name) => 
    Cluster.find(cluster => cluster.hasOwnProperty(name))[name]

然后将其传递给FlatList

<FlatList
    data={getClusterByName('cluster1')}
    ...
/>

显示React Native的Flatlist数组

1 个答案: