如何使用来自网络的数据填充 FlatList 的 header？

Question

我有一个显示用户评论的 FlatList，我还想用用户的个人资料填充 header（这与获取评论的网络调用不同）。

这是 render() 的样子：

render() {
    return (
      <FlatList
        data = {this.state.comments}
        renderItem = {this.renderComment}
        ListHeaderComponent={this.renderHeader}
        keyExtractor={(comment, index) => comment.id}
      />
    )
  }

然后 renderHeader 看起来像：

  renderHeader() {
     return (
      <ProfileView user={this.state.profile} />
    )
  }

我在 componentWillMount 中使用 fetch，然后使用 setState 来获取数据（这部分工作正常）。现在我在模拟器上得到的错误是

undefined is not an object (evaluating 'this.state.profile')

但是当我删除 renderHeader 方法时，可以正确获取评论。

由于我是 RN 的新手，您能帮我了解哪里出了问题以及如何解决吗？

Answer 1

这看起来只是访问上下文的问题。当你运行由 FlatList 调用的 renderHeader 方法时，它不知道 this 与什么有关。

因此，您只需在 constructor() 方法中设置 this.renderHeader = this.renderHeader.bind(this)。

或者，您也应该能够使用箭头函数来调用它，因为它会自动引用正确的 this 上下文。

ListHeaderComponent={() => this.renderHeader()}

如何使用来自网络的数据填充 FlatList 的 header？

How to populate a FlatList's header with data from the network?

react-native

react-native-flatlist