我有一个数组的天,我在我的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>;
在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>
)}
键对于每个组件应该是唯一的。
这不是错误,而是警告。每次在jsx中映射数组时,都必须提供一个惟一的键道具。React使用key prop来创建组件和DOM元素之间的关系。库使用此关系来确定是否应该重新呈现组件。
执行如下操作:
<TouchableOpacity key={index} onPress={() => setIndexSelect(index)}>
这类似于向对象传递id以识别它们。同样,在react-native中,你需要提供一个键,它可以是一个数字或任何东西,但每个组件都可以识别它,并将其与其他组件区分开来。
在你的例子中,你可以传递一个键在;
<TouchableOpacity key={index} onPress={() => setIndexSelect(index)}> // If index is different for each component.