如何打破一个.map函数?下面附上代码示例。我想打破外观一旦索引达到5,因为我只想渲染5头像到屏幕上。
<View style={{ flexDirection: 'row', marginTop: 20, marginLeft: 30 }}>
{
peopleGroup.map((people, i) => {
if(i<5) {
return (
<Avatar
key={people.id}
width={30}
position='absolute'
containerStyle={{ transform: [{translate: [-28 + (28 * i), 0, 1 - (i * 0.1)]}] }}
small
rounded
source={{uri: people.image}}
activeOpacity={0.7}
/>
)
}else if(i===5) {
return (
<View key={i} style={{ transform: [{translate: [(25 * i), 9, 0]}] }}>
<Text>{peopleGroup.length}</Text>
</View>
)
}
}
)
}
</View>
4条答案
按热度按时间y3bcpkx11#
在Map之前使用
Array.slice
。Tada!
rnmwe5a22#
如何破解一个.map函数?
不可能,我们不能破坏#array.map,它将为数组的每个元素运行。
为了解决这个问题,你可以先使用slice,然后使用map,slice数组的前5个元素,然后在上面运行map。
就像这样:
gcuhipw93#
而不是使用
.slice
和.map
,这将创建另一个循环。您可以使用
.reduce
,这样您就可以用一个循环来执行逻辑(性能更好)。不同之处在于
.map
必须返回相同长度的数组,而.reduce
实际上可以返回任何内容。运行示例:
zfciruhq4#
将其添加到
try catch
中以防止崩溃。