在 FlatGrid('react-native-super-grid) 上遇到两个具有相同键的孩子答案

【问题标题】：Encountered two children with the same key on FlatGrid('react-native-super-grid)在 FlatGrid('react-native-super-grid) 上遇到两个具有相同键的孩子
【发布时间】：2021-08-04 10:13:35
【问题描述】：

我正在我的应用程序上从 API 呈现项目。我使用来自 react-native-surt-grid 的 FlatGrid 而不是使用 FlatList，因为我想要项目的网格视图。使用 FlatGrid 时出现错误：“错误：警告：遇到两个具有相同密钥的孩子，.$0_1。” FlatGrid 具有 keyextractor 属性。

这是我的代码：

return(
        <View style={{ flex: 1, padding: 24, }}>

      
          <SearchBar round
          searchIcon={{size:24}}
          platform={Platform.OS}
          containerStyle={{backgroundColor: '#FFFFFF'}}
          backgroundColor={'#FFFFFF'}
          inputStyle={{backgroundColor: '#FFFFFF'}}
          placeholder='Search for items...'
          cancelButtonTitle='Cancel'
          ></SearchBar>
        


      {isLoading ? <ActivityIndicator /> : (
        <FlatGrid
        style={{marginTop:35}}
        itemDimension={130}
        spacing={10}
        data={data}
        keyExtractor={(item, index) => {
          console.log("index", index)
          return index.toString();
        }}
        renderItem={({ item }) => {
          return (
            // <Text style={{ flex: 1, backgroundColor: '#ffe4e1' }}>{item.name}</Text>
            // <Text style={styles.itemName} > {item.name} </Text>
            <View style={styles.gridView}>
            <CardView name= {item.name}/>
          </View>
          )
        }}
      />
      )}
    </View>
    )
}

我从外部组件 CardView 呈现我的项目。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

您的密钥可以是整数类型。您不必将其转换为字符串。

理想情况下，数据中的每个项目都应该有一个唯一的 ID。

完成后，您可以试试这个：

keyExtractor={(item) => item.id}

【讨论】：