警告：列表中的每个孩子都应该有一个独特的"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>

)}

键对于每个组件应该是唯一的。

Answer 2

这不是错误，而是警告。每次在jsx中映射数组时，都必须提供一个惟一的键道具。React使用key prop来创建组件和DOM元素之间的关系。库使用此关系来确定是否应该重新呈现组件。

执行如下操作:

<TouchableOpacity key={index} onPress={() => setIndexSelect(index)}>

Answer 3

这类似于向对象传递id以识别它们。同样，在react-native中，你需要提供一个键，它可以是一个数字或任何东西，但每个组件都可以识别它，并将其与其他组件区分开来。

在你的例子中，你可以传递一个键在;

<TouchableOpacity key={index} onPress={() => setIndexSelect(index)}> // If index is different for each component.