Comment remplir un en-tête FlatList avec des données du réseau?

Question

J'ai un FlatList qui affiche les commentaires d'un utilisateur et je veux également remplir l'en-tête avec le profil de l'utilisateur (qui est un appel réseau différent de celui qui récupère les commentaires).

Voilà comment render() ressemble:

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

puis renderHeader ressemble à:

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

J'utilise fetch dans componentWillMount puis setState afin d'obtenir les données (cette partie fonctionne très bien) . Maintenant, l'erreur que je reçois sur le simulateur est

non définie est pas un objet (évaluation « this.state.profile »)

mais quand je retire la méthode renderHeader, les commentaires sont extraits correctement.

Depuis que je suis très nouveau à RN, pouvez-vous m'aider à comprendre ce qui ne va pas et comment y remédier?

Answer 1

Cela ressemble simplement à un problème d'accès au contexte. Lorsque vous exécutez la méthode renderHeader appelée par le FlatList il ne sait pas ce que this se rapporte à. Vous pouvez donc simplement définir this.renderHeader = this.renderHeader.bind(this) dans votre méthode constructor(). Vous pouvez également utiliser une fonction fléchée pour l'appeler, car cela fait automatiquement référence au contexte correct this.

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