警告：列表中的每个子项都应该有一个唯一的“key”道具。在本机反应中

Question

我有很多天，我正在映射这些天，View但我收到警告Warning: Each child in a list should have a unique "key" prop.，我无法理解为什么会出现此错误。我是原生反应新手，我试图理解每个警告的含义

我的代码：

<ScrollView
  horizontal={true}
  showsHorizontalScrollIndicator={false}
  contentContainerStyle={styles.horizontalView}>
  {weekArray.map((item, index) => (
    <TouchableOpacity index={index} onPress={() => setIndexSelect(index)}>
      <Text
        style={{
          fontFamily: "Raleway-Regular",
          fontSize: SizeConfig.blockHeight * 2.1,
          color: indexSelect === index ? COLORS.blackDark : COLORS.blackLight,
        }}>
        {index === weekArray.length - 1 ? ` ${item.day} ` : ` ${item.day} | `}
      </Text>
    </TouchableOpacity>
  ))}
</ScrollView>;

Answer 1

在 React 中，如果您要从数组映射组件，则应该向每个组件传递一个唯一的 prop。

{weekArray.map((item, index) => (
<TouchableOpacity index={index} onPress={() => setIndexSelect(index)} key={index}>
  <Text
    style={{
      fontFamily: "Raleway-Regular",
      fontSize: SizeConfig.blockHeight * 2.1,
      color: indexSelect === index ? COLORS.blackDark : COLORS.blackLight,
    }}>
    {index === weekArray.length - 1 ? ` ${item.day} ` : ` ${item.day} | `}
  </Text>
</TouchableOpacity>

))}

每个组件的密钥应该是唯一的。