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

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

我使用fetchincomponentWillMount然后setState为了获取数据（这部分工作正常）。现在我在模拟器上遇到的错误是

undefined 不是对象（评估“this.state.profile”）

但是当我删除该renderHeader方法时，会正确获取注释。

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

Answer 1

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

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

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

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