Question

我的渲染器中有一些FlatList，但是我收到“唯一键”警告，我也尝试使用keyExtractor，但对我来说不起作用。这是我的代码：

<FlatList
                    data={this.state.itemWaiting}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({ item, index }) => (
                      <MatchTurnList                    
                        username={item.home_user.username}
                        opponent={item.away_user.username}
                        matches={item.round_results} 
                        turnID={item.turn_id}                       
                        matchID={item.match_id}
                        userID={item.home_uid}
                        Rounds={item.round}
                        gameStatus={item.status}
                        onPress={() => console.log('hi')}                        
                      />
                    )}
                  />

这是我的警告：

警告：列表中的每个孩子都应该有一个独特的“钥匙”道具。检查MatchTurnList的渲染方法。有关更多信息，请参见.....

这是我的matchTurnList组件：

return (
      <TouchableOpacity onPress={onPress} activeOpacity={0.9} style={styles.gameStatus}>
        <View style={{ flex: 2, justifyContent: 'center', alignItems: 'flex-start' }}>
          <Text style={[globalStyles.mediumFont, globalStyles.lightColor, globalStyles.acmeFont, { margin: normalize(1) }]}>{username}</Text>
          <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
            {a}   
          </View>
        </View>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text style={[globalStyles.fontRifficFree, globalStyles.largFont, { color: '#ffbd00' }]}>VS</Text>
        </View>
        <View style={{ flex: 2, justifyContent: 'center', alignItems: 'flex-end' }}>
          <Text style={[globalStyles.mediumFont, globalStyles.lightColor, globalStyles.acmeFont, { margin: normalize(1) }]}>{opponent}</Text>
          <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
            {b}
          </View>
        </View>
      </TouchableOpacity>
    );

能帮我找到我的错误在哪里吗？谢谢。

Answer 1

尝试我的代码。您需要在渲染方法中添加key道具

<FlatList
                    data={this.state.itemWaiting}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({ item, index }) => (
                      <MatchTurnList    
                        key={index}                
                        username={item.home_user.username}
                        opponent={item.away_user.username}
                        matches={item.round_results} 
                        turnID={item.turn_id}                       
                        matchID={item.match_id}
                        userID={item.home_uid}
                        Rounds={item.round}
                        gameStatus={item.status}
                        onPress={() => console.log('hi')}                        
                      />
                    )}
                  />

它将删除您对唯一键的警告。

Answer 2

您应该使用这样的平面列表

render(){
return(
      <FlatList
         data={this.props.data} //<- your data array
         keyExtractor={this._keyExtractor}
         renderItem={this._renderItem}
      />
)
}

然后在这样的组件中使用 keyExtractor函数

   _keyExtractor = (item, index) => String(item.yourID) //<- this id from your data.

和最终的 _renderItem函数

_renderItem = (item) => {
   <View>
      ...your code to render UI...
   </View>
}

FlatList中的React-Warning-Keys

2 个答案: