1

我正在尝试使用道具渲染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 存储库吗?我找不到我的错误在哪里。在这里的任何帮助将不胜感激。

4

1 回答 1

3

所以这里的问题是 React Prop-Types 不匹配。反应文档

VirtualizedList组件需要一个类或一个函数,因此向它传递一个评估 React 类的函数会给它一个对象,这会引发错误。

解决方案是像这样传入函数本身:

ListHeaderComponent={ ListHeaderCreate }
于 2017-06-07T19:20:02.170 回答