ListHeaderComponent 接收对象，需要一个字符串或 class/function

Question

我正在尝试使用 ListHeaderComponent 道具渲染 FlatList 组件，FlatList 在没有该道具的情况下可以正常渲染，但是当我添加 ListHeaderComponent 时出现以下错误。

这是 Discover class 的 render() 函数：

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>
  );
}

这是 DiscoverSearch class 的 render() 函数：

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 存储库吗？我找不到我的错误在哪里。如有任何帮助，我们将不胜感激。

Answer 1

所以这里的问题是 React Prop-Types 不匹配。 React Docs

VirtualizedList 组件需要一个 class 或一个函数，因此向它传递一个计算 React Class 的函数会给它一个对象，这会引发错误。

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

ListHeaderComponent={ ListHeaderCreate }

ListHeaderComponent 接收对象，需要一个字符串或 class/function

ListHeaderComponent receives object, expected a string or class/function

reactjs

react-native

react-native-flatlist