React Native添加key prop后仍触发“列表子项需唯一key”错误求助

你的问题出在两个核心点：

• key的位置错误：React要求key必须绑定在map循环返回的最外层直接子元素上。你当前把key加在了内部的<Text>组件，而循环的直接子元素是<View>，所以要把key移到<View>标签上。
• key的写法错误：你用双引号包裹了{ing}，导致key变成了固定字符串"{ing}"，而非动态获取的食材名称。正确写法是去掉引号，直接写key={ing}。

修正后的代码：

const BadFood = ({ ingredients }) => {
  return (
    <View>
      <Text>Bad Ingredients</Text>
      {ingredients.map((ing) => (
        <View key={ing}>
          <Text>{ing}</Text>
        </View>
      ))}
    </View>
  );
};

额外提示：如果后续你的食材数组可能出现重复值，建议使用更唯一的key，比如结合索引key={${ing}-${index}}，避免因重复key引发新的警告。

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