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

Question

我有一个 FlatList显示用户的评论，我还想用用户的个人资料填充标题(这是与获取评论的网络调用不同的网络调用)。

方法如下 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} />
    )
  }

我用 fetch在 componentWillMount然后 setState为了获取数据(这部分工作正常)。
现在我在模拟器上得到的错误是

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

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

由于我对 RN 很陌生，您能帮我了解什么是错误的以及如何解决吗？

Answer 1

这看起来只是访问上下文的问题。当您运行 renderHeader 时FlatList 调用的方法不知道是什么this涉及到。

所以，你可以简单地设置 this.renderHeader = this.renderHeader.bind(this)在您的 constructor()方法。

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

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