React Native FlatList列表子元素key警告问题的解决咨询

我在React Native应用中使用FlatList展示产品列表，涉及Products.js与ProductCard.js两个文件。已在FlatList中配置keyExtractor，并为ProductCard的TouchableOpacity设置了key属性，但仍收到key重复警告。

Products.js 代码 #

const Products = ({navigation}) => {

  const renderItem = ({item}) => (
    <ProductCard
      item={item}
      onClickHandler={() => navigation.navigate('Item Detail', {item: item})}
    />
  );

  return (
    <View>
      <ProductOperations />
      <FlatList
        data={data}
        keyExtractor={item => item.id.toString()}
        renderItem={renderItem}
      />
    </View>
  );
};

export default Products;

ProductCard.js 代码 #

const ProductCard = props => {
  const createStars = rating => {
    //...logic
  };

  return (
    <TouchableOpacity key={props.item.id} style={styles.card} onPress={props.onClickHandler} >
      <Image style={styles.image} source={{uri: props.item.thumbnail}} />
      <View style={styles.textColumn}>
        <Text style={[styles.brandText, styles.textPadding]}>
          {props.item.brand}
        </Text>
        <Text style={[styles.titleText, styles.textPadding]}>
          {props.item.title}
        </Text>
      </View>
      <View style={styles.textColumn}>
        <View style={[styles.textColumn, styles.textPadding]}>
          {createStars(props.item.rating)}
        </View>
        <Text style={[styles.ratingText, styles.textPadding]}>
          {props.item.rating}
        </Text>
      </View>
      <Text style={[styles.priceText, styles.textPadding]}>
        ${props.item.price}
      </Text>
    </TouchableOpacity>
  );
};

export default ProductCard;

收到的警告信息 #

Warning: Each child in a list should have a unique "key" prop.

Check the render method of ProductCard. See https://reactjs.org/link/warning-keys for more information.
at Icon (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.shoppingapp&modulesOnly=false&runModule=true:101233:38)

问题分析与解决步骤 #

警告明确指向Icon组件，说明问题不在FlatList的ProductCard子项上，而是ProductCard内部createStars函数生成的星星Icon列表缺少唯一key。另外，TouchableOpacity上的key是多余的——FlatList已经通过keyExtractor给每个ProductCard分配了唯一key，给内部元素加key反而会干扰React的key识别逻辑。

需要做两处修改：

1. 移除TouchableOpacity上的key
   直接删除ProductCard中TouchableOpacity的key={props.item.id}属性。

2. 给createStars生成的每个Icon添加唯一key
   找到createStars函数的实现，给循环生成的每个Icon组件加上全局唯一的key。比如结合产品ID和星星索引来生成key，确保不会重复。

修改后的createStars示例

假设原来的函数是循环生成星星，修改后：

const createStars = rating => {
  const stars = [];
  for (let i = 1; i <= 5; i++) {
    stars.push(
      <Icon 
        key={`star-${props.item.id}-${i}`} 
        name={i <= rating ? 'star' : 'star-outline'} 
      />
    );
  }
  return stars;
};

这样处理后，每个星星Icon都有了唯一标识，警告就会消失。

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