[英]Unable to loop and render FlatList inside .map function react-native
I am trying to render a FlatList inside a component.我正在尝试在组件内呈现 FlatList。 The Component itself is inside a ScrollView.
组件本身位于 ScrollView 内。
I am using map function to loop through the data to pass into the component.我正在使用 map 函数遍历数据以传递到组件中。 Earlier I was using ScrollView instead of FlatList.
早些时候我使用的是 ScrollView 而不是 FlatList。 It was working fine, but was rendering slow.
它工作正常,但渲染速度很慢。 So I decided to use FlatList.
所以我决定使用 FlatList。
Here's my code:这是我的代码:
renderComp(){
const { filtersView,cats,cats_title, clearStyle} = styles;
const data = this.props.ingreds;
const arr = Object.entries(data);
return arr.map(i=> {
const name= i[0];
const items_obj = i[1];
const items = Object.values(items_obj);
return(
<View key={name} style= {filtersView}>
<View style={cats}>
<Text style ={cats_title}>{name}</Text>
<Text style={clearStyle}>Clear All</Text>
</View>
<View style={{justifyContent:'flex-start', alignItems:'flex-start'}}>
<FlatList
style={{ marginRight:6}}
data={items}
keyExtractor={(x,i)=> i.toString()}
renderItem={({item}) =>{
this.renderItems(item)
}}
/>
</View>
</View>
)
})
}
And here's the ScrollView Component:这是 ScrollView 组件:
<ScrollView contentContainerStyle={{alignItems:'flex-start',
justifyContent:'flex-start',flex:1, height:72}} >
{this.renderComp()}
</ScrollView>
And The loop stops after one iteration.并且循环在一次迭代后停止。
Here's the output: https://i.stack.imgur.com/yM151.png这是输出: https : //i.stack.imgur.com/yM151.png
Any suggestions?有什么建议?
ReactNative FlatList renderItem method should return a ?React.Element component. ReactNative FlatList renderItem 方法应该返回一个 ?React.Element 组件。 In your case either use return this.renderItems or skip the inner brackets.
在您的情况下,请使用 return this.renderItems 或跳过内括号。
https://facebook.github.io/react-native/docs/flatlist#renderitem https://facebook.github.io/react-native/docs/flatlist#renderitem
({item}) => this.renderItems(item)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.