ListHeaderComponent 接收对象，需要一个字符串或类/函数答案

【问题标题】：ListHeaderComponent receives object, expected a string or class/functionListHeaderComponent 接收对象，需要一个字符串或类/函数
【发布时间】：2017-06-07 18:07:40
【问题描述】：

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

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

【问题讨论】：

在您的 DiscoverSearch 类中，类别映射函数打开括号，但从不返回任何内容。如果你在一个粗箭头函数中打开一个块，你需要一个 return 语句。
当修改pickerItems 看起来像这样：` const pickerItems = this.props.categories.map((category) => { return( )});`
抱歉，该评论的编辑超时：将pickerItems 箭头函数修改为如下所示：{return()} 或此：(）同样的错误仍然存在，我还应该提到我实际上删除了 DiscoverSearch 的所有渲染函数，除了中的一些之外，我仍然遇到上面显示的相同错误。
不要调用 ListHeaderCreate 函数并传递值，而是尝试传递函数本身。 ListHeaderComponent={ListHeaderCreate} 而不是 ListHeaderCreate()。
天哪。我被困了两个小时。那解决了它。因此，当控制台说它需要一个类/函数时，这实际上意味着，我想要这个函数，而不是调用所述函数。你知道为什么 React 会这样吗？

标签： reactjs react-native react-native-flatlist

【解决方案1】：

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

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

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

ListHeaderComponent={ ListHeaderCreate }

【讨论】：