我正在尝试使用道具渲染FlatList
组件ListHeaderComponent
,如果没有该道具,FlatList 渲染效果很好,但是当我添加 ListHeaderComponent 时出现以下错误。
这是render()
Discover 类的功能:
render() {
renderFlatListItem = (event) => {
return (
<Event
description={event.Description}
startTime={event.StartTimeToString}
Location={event.Location ? event.Location : 'TBD' }
key={event.ID}
/>
)
}
ListHeaderCreate = () => {
return (
<DiscoverSearch
resultDescription={this.state.popularEvents ? 'Popular Events':
'Search Results'}
categories={this.state.categories}
passCategory={this.handleSelectedCategory}
passInitialPosition={this.handleInitialPosition}
passLastPosition={this.handleLastPosition}
passSearch={this.handleSearch}
/>
);
}
return (
<View>
<FlatList
ListHeaderComponent={ListHeaderCreate()}
data={this.state.events}
renderItem={({ item }) => (
renderFlatListItem(item)
)}
/>
</View>
);
}
这是render()
DiscoverSearch 类的功能:
render () {
const pickerItems = this.props.categories.map((category) => {
<Picker.Item key={category.ID} label={category.Name} value={category.ID}/>
});
return (
<View>
<View>
<TextInput
style={{height: 40}}
placeholder="Search Events"
onChangeText={(text) => this.setState({searchText: text})}
/>
<TextInput
style={{height: 40}}
placeholder="Location"
onChangeText={(text) => this.setState({LocationText: text})}
/>
</View>
<View>
<Picker
onValueChange={(category) => this.props.passCategory}
>
{pickerItems}
</Picker>
<Button
title='Search'
onPress={console.log(this.state)}
/>
</View>
</View>
)
}
我假设 VirtualizedList 必须是我从 react-native 导入的 flatList 的子级,我应该将此问题指向 github 上的 react-native 存储库吗?我找不到我的错误在哪里。在这里的任何帮助将不胜感激。