React Native使用Array.map渲染数据重复且出现key属性警告问题

问题原因 #

React/React Native在渲染动态生成的列表时，需要为每个列表项绑定唯一key属性，用于虚拟DOM的差异对比。未绑定key时，React无法精准定位每个列表项的变化，会触发不必要的重复渲染，同时抛出Warning: Each child in a list should have a unique "key" prop.警告。

问题代码修正 #

你当前的代码未给map生成的<Text>组件绑定key属性，参考修改如下：

const test = ["Test1","Test2","Test3" ]
<View>
 {/* 给每个Text组件添加唯一key属性 */}
 {test.map(item => <Text key={item}>{item}</Text> )}
</View>

key属性使用注意事项 #

• 如果数组元素是固定不变化的纯展示列表，可以直接用元素内容作为key，也可以用遍历索引index作为key
• 如果列表会涉及增删、排序、筛选等动态操作，禁止使用索引index作为key，索引会随着元素位置变化发生改变，会导致diff逻辑出错引发渲染异常，这种场景建议给每个数组元素添加固定唯一的id字段，用id作为key值
• 同一父组件下的所有列表子组件，key值必须唯一，不能重复

内容的提问来源于stack exchange，提问作者Sarulatha A