web-dev-qa-db-fra.com

Réagissez Native foreach loop

Je développe une petite application dans React Native et je recherche quelque chose comme une fonction foreach. Je n'arrive pas à trouver une boucle foreach. Pas sur StackOverflow et même pas dans le docs . J'ai trouvé quelque chose avec 'map', mais je ne sais pas si c'est ce que je cherche.

Avec une demande à mon serveur, je reçois plusieurs objets d'utilisateurs. Lorsque je me connecte le résultat, cela ressemble à ceci:

Objet {
 "id": "1", 
 "rôle": "utilisateur", 
 "nom d'utilisateur": "utilisateur1", 
 },
Objet {
 "id": "2", 
 "rôle": "admin", 
 "nom d'utilisateur": "utilisateur2",

J'aimerais afficher ceci dans une liste . En clair PHP J'utiliserais une boucle foreach pour cela, mais comme je l'ai dit, je ne trouve pas de boucle foreach pour React Native.

Comment est-il possible de faire une boucle à travers ces objets? Je sais que je pourrais aussi utiliser un simple boucle, mais ce ne serait certainement pas mon premier choix ...

EDIT: J'ai enregistré cette valeur dans this.state.users avec this.setState({users: responseData.users});. L'état est défini dans mon constructeur. J'essaie d'y accéder avec this.state.users.map(id => <Text>{id}</Text>) mais j'obtiens toujours la même erreur: null is not an object (evaluating 'this.state.users.map'). Est-ce que je le fais bien?

loopsreact-nativeforeach
4
Tekk

Vous pouvez utiliser map ou pour - de ou tout autre

Exemple:

// for of
for (let userObject of this.state.users) {
    console.log(userObject.username);
}
// map
this.state.users.map((userData) => {
    console.log(userData.username);
});

selon l'erreur, il se peut que vous n'ayez pas de données dans l'état users. Si les données sont correctes, l'exemple ci-dessus fonctionnera correctement

8
Jigar Shah

En réaction, la méthode préférée est la méthode map de Array. Exemple utilisant la fonction flèche ES6: 

render() {    
    return (
        <View>    
           {dataList.map(r => <Button>{r}</Button>)}    
        </View>
    )
}
2
Ozgur

Vous pouvez également utiliser lodash (npm install lodash) et exécuter ce qui suit:

import _ from 'lodash';

...

_.each(dataList, function(userObject) { console.log(userObject); });
0
kevinl