错误警告：遇到两个 children 具有相同的键，`${item}-${index}`

Question

我一直收到此错误 'ERROR Warning: Encountered two children with the same key, ${item}-${index}' 并且不知道为什么？我该如何解决它？请帮忙提前谢谢！

    return (
        <View style={styles.container}>
            <FlatList 
                data={tabs}
                keyExtractor={(item, index) => '${item}-${index}'}
                renderItem={({ item }) => {
                    return (
                        <TouchableOpacity style={styles.pill} onPress={() => { setSelectedTab(item); }}>
                            <Text style={styles.pillText}>{item}</Text>
                        </TouchableOpacity>
                    )
                }}
            />
    
            <LinearGradient colors={['gold', '#FF7F50', '#FF7F50']} style={StyleSheet.absoluteFill}>
                <Text style={styles.title}>Main Menu Screen</Text>
                <Text style={styles.title}>{ address }</Text>
            </LinearGradient>
        </View>
        );
    };

Error: ERROR Warning: Encountered two children with the same key, ${item}-${index}.

Answer 1

只需将 ${item}-${index} 周围的 '' 替换为 `` 即可在字符串中插入变量。但实际上你只需要参考索引如下：

return (
        <View style={styles.container}>
            <FlatList 
                data={tabs}
                keyExtractor={(_, index) => index.toString()}
                renderItem={({ item }) => {
                    return (
                        <TouchableOpacity style={styles.pill} onPress={() => { setSelectedTab(item); }}>
                            <Text style={styles.pillText}>{item}</Text>
                        </TouchableOpacity>
                    )
                }}
            />
    
            <LinearGradient colors={['gold', '#FF7F50', '#FF7F50']} style={StyleSheet.absoluteFill}>
                <Text style={styles.title}>Main Menu Screen</Text>
                <Text style={styles.title}>{ address }</Text>
            </LinearGradient>
        </View>
        );
    };