0
votes

Render Flatlist uniquement lorsque les données sont présentes

i Exécution d'une requête graphql et en fonction des données, rendez-vous une flatliste. XXX

Cependant, je dois actuellement utiliser des opérateurs ternaires pour les contrôles tels que les données ? data.me.friends: null dans le flatliste pour éviter les erreurs de documents. Si la requête échoue et que les données sont nuls, il perturbe toute la performance et je devrai utiliser plusieurs ifs au sein du composant d'élément Whitelist.

Je cherche donc la meilleure façon de faire Les données sont transmises à la liste locale uniquement lorsque la mutation réussit. Je pourrais utiliser surcomplet pour cela, mais je ne sais pas comment l'organiser de telle sorte qu'aucune liste à plat ne soit affichée du rendement principal lorsqu'il y a une erreur.

aussi, actuellement J'utilise la même clé pour tous les éléments de la liste, mais cela ne devrait pas être comme ça évidemment


0 commentaires

3 Réponses :


0
votes

Avez-vous essayé data = {data? .me? .friends}

Vous pouvez également utiliser cette syntaxe data = {données? données? .Me? .friends: []}


0 commentaires

0
votes

Vous devez utiliser comme xxx

data = {data? .me? .friends || []} vous devez utiliser cela que j'ai déjà mentionné dans le code https://developer.mozilla.org/en- US / DOCS / Web / JavaScript / Référence / Opérateurs / Facultatif_Chainting Ce lien sera également utile


1 commentaires

Bien que ce code puisse résoudre le problème de l'OP, il est préférable d'inclure une explication sur la manière dont votre code répond à la question de l'OP. De cette manière, les futurs visiteurs peuvent apprendre de votre message et l'appliquer à leur propre code. Donc, ce n'est pas un service de codage, mais une ressource pour la connaissance. De plus, de haute qualité, des réponses complètes sont plus susceptibles d'être évitées. Ces caractéristiques, ainsi que l'exigence selon laquelle tous les postes sont autonomes, sont certaines des forces de manière à ce que la plate-forme, qui la différencie des forums. Vous pouvez modifier pour ajouter des informations supplémentaires et / ou pour compléter vos explications avec la documentation de la source.



1
votes

Rendez votre liste lorsque vous avez des données, de cette manière, vous aurez également de meilleures performances lorsque des choses moindres sont rendues donc ce sera un rendu conditionnel de votre flatliste code>.

{data && data.me && data.me.friends.lenght > 0 &&
    <FlatList
        data={data.me.friends}
        horizontal={false}
        renderItem={({ item }) => (
          <Friend
            friend={item}
            onDeleteFriend={onDeleteFriend}
            originatorId={data ? data.me.id : null}
          />
        )}
        keyExtractor={(data: any) => '3'}
        ListEmptyComponent={renderEmptyContainer()}
      />
}


0 commentaires