React Native组件两次使用map出现唯一key警告问题求助

这个警告是因为React要求列表中的每个子元素都要有唯一的key属性，用来识别列表项的变化、优化渲染性能。你的代码里有两层map循环，每一层循环生成的元素都需要添加唯一key，具体修改如下：

修改后的完整代码 #

<View>
    <Header title={PERSONAL_INFO}/>
    <Center>
        <ScrollView w={["200", "300"]} h="80">
            {data.map((item, index) => (
                <View key={item.title}> {/* 外层列表项添加key，用唯一的title作为标识 */}
                    <Center>
                        <Heading>
                            {item.title}
                        </Heading>
                        {
                            item.data.map((subItem, subIndex) =>
                                <Text key={subIndex}>{subItem.notice}</Text> {/* 内层列表项添加key，这里用subIndex，若有唯一id建议用id */}
                            )
                        }
                    </Center>
                </View>
            ))}
        </ScrollView>
    </Center>
</View>

关键说明 #

• 外层map生成的<View>：用item.title作为key（假设你的title在数组中是唯一的），如果后续有重复title的情况，建议给每个外层对象添加唯一id属性，用item.id作为key更稳妥。
• 内层map生成的<Text>：这里用了subIndex作为临时方案，如果你的子项有唯一标识（比如file字段或者新增id），优先用这些唯一值作为key，避免用index带来的性能问题（当列表项顺序变化时）。

添加完这两个key属性后，警告就会消失了。

内容的提问来源于stack exchange，提问作者Key Lol