如何用来自网络的数据填充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} />
    )
  }

我使用fetchin componentWillMount然后setState才能获取数据(这部分工作正常).现在我在模拟器上得到的错误是

undefined不是对象(评估'this.state.profile')

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

由于我对RN很新,你能帮助我理解错误以及解决方法吗？

Answer 1

这看起来只是访问上下文的问题.当你运行它所renderHeader调用的方法时,FlatList它不知道与之this有关.

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

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

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