React Native映射数组时Key应唯一警告的排查求助

问题根源分析 #

你的代码里有两处未正确设置key属性的地方，还有一处需要确认字段名的正确性，这些都是导致警告的原因：

1. 主数据列表未传递Key #

在this.state.Data.map的回调中，你调用this.ItemRenderer({item})时没有给返回的组件添加key。key需要绑定在映射生成的最外层组件上，而不是子组件内部。

修改方式：
直接在映射时给PremiumItemListComponent设置key，或者通过ItemRenderer传递key：

方式一（更直接）：

this.state.Data.map((item) => (
  <PremiumItemListComponent 
    key={item.id} // 注意：如果你的唯一字段是item.ids就写item.ids，务必确认字段名正确
    item={item} 
    navigation={this.props.navigation} 
  />
))

方式二（通过ItemRenderer传递）：

// 映射时传递key
this.state.Data.map((item) => (
  this.ItemRenderer({item, key: item.id})
))

// ItemRenderer组件接收并传递key
ItemRenderer ({ item, key }) {
    return (
        <PremiumItemListComponent key={key} item={item} navigation={this.props.navigation} />
    );
};

2. 星级评分的图标列表无Key #

在PremiumItemListComponent中，生成星级图标的map循环没有设置key，这也是警告的来源之一。

修改代码：

[...Array(5)].map((e, i) =>
  <Ionicons 
    key={i} // 此处用index作为key是安全的，因为星星数量固定不会动态变更顺序
    name={i+1<=Number((3.688689).toFixed(0))?"star-sharp":"star-outline"} 
    size={15} 
    color="#FFE600" 
  />
)

3. 确认唯一标识字段的正确性 #

你提到item.ids是唯一值，但要检查代码中是否正确使用了这个字段（比如是不是误写成了item.id）。打印this.state.Data中的item，确认唯一标识的字段名确实是ids，避免因字段名错误导致key重复或无效。

完成以上修改后，"每个子元素需有唯一key"的警告就会消失。

内容的提问来源于stack exchange，提问作者Ahmed Yasin