![](/img/trans.png)
[英]React Native FlatList renders data twice when using extraData
[英]Flatlist renders mapped data thrice in React Native
我一直在使用 map function 在我的 React Native 應用程序中使用 Flatlist 呈現數據。 但是由於某種原因,相同的數據被渲染了三次。 這是我現在擁有的:
renderItem = ({ item, index }) => { if (item === null) return <View key="post_" />; const imageURI = this.props.categories; const mainCategories = imageURI.filter( category => category.parent === 0 ); return mainCategories.map((data) => { return ( <TouchableOpacity activeOpacity={0.9} style={[styles.panelTwo]} onPress={() => this.onRowClickHandle(item)} > <ImageCache uri={data.image === null? Images.defaultPayment: data.image.src} key={data.id} style={styles.imagePanelTwo} /> <Text numberOfLines={1} style={styles.nameTwo}> {data.name} </Text> </TouchableOpacity> ); }) }; render() { const {categories,showSorting} = this.props; const mainCategories = this.props.categories.filter( category => category.parent === 0 ); return ( <View> <View style={[styles.flatWrap]}> <FlatList contentContainerStyle={styles.flatlist} data={mainCategories} keyExtractor={item => `post__${item.id}`} renderItem={this.renderItem} showsHorizontalScrollIndicator={false} horizontal /> </View> </View> ); } }
我無法弄清楚為什么在這種情況下相同的數據會渲染三次。 mainCategories 也是這樣的:
除了它顯示了三遍。
假設您的數據數組是[1, 2, 3]
。 在這種情況下,FlatList 將遍歷它並一一呈現它們,看起來像:
<Text>1</Text>
<Text>2</Text>
<Text>3</Text>
但是在renderItem
中,您再次執行循環並說,為每一行渲染整個數組,您的結果是:
<Text>1</Text>
<Text>2</Text>
<Text>3</Text>
<Text>1</Text>
<Text>2</Text>
<Text>3</Text>
<Text>1</Text>
<Text>2</Text>
<Text>3</Text>
改變
renderItem = ({ item, index }) => {
if (item === null) return <View key="post_" />;
const imageURI = this.props.categories;
const mainCategories = imageURI.filter(
category => category.parent === 0
);
return mainCategories.map((data) => {
return (
<TouchableOpacity
activeOpacity={0.9}
style={[styles.panelTwo]}
onPress={() => this.onRowClickHandle(item)}
>
<ImageCache uri={data.image === null ? Images.defaultPayment : data.image.src} key={data.id} style={styles.imagePanelTwo} />
<Text numberOfLines={1} style={styles.nameTwo}>
{data.name}
</Text>
</TouchableOpacity>
);
})
};
至
renderItem = ({ item }) => {
if (item === null) return <View key="post_" />;
const onPressItem = () => this.onRowClickHandle(item)
return (
<TouchableOpacity
activeOpacity={0.9}
style={styles.panelTwo}
onPress={onPressItem}
>
<ImageCache uri={data.image?.src || Images.defaultPayment} key={data.id} style={styles.imagePanelTwo} />
<Text numberOfLines={1} style={styles.nameTwo}>{data.name}</Text>
</TouchableOpacity>
);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.