web-dev-qa-db-ja.com

Reactネイティブforeachループ

私はReact Nativeで小さなアプリを開発しています。foreach関数のようなものを探しています。foreachループが見つかりません。StackOverflowではなく、- docs 。「マップ」で何かを見つけましたが、これが私が探しているものかどうかわかりません。

サーバーへのリクエストで、ユーザーの複数のオブジェクトを取得します。結果をログに記録すると、次のようになります。

 Object {
 "id"： "1"、
 "role"： "user"、
 "username"： "user1"、
}、
 Object {
 "id"： "2"、
 "role"： "admin"、
 "username"： "user2"、

これをリストに出力したいと思います。平易なPHP私はこれにforeachループを使用しますが、先ほど言ったように、foreachループはReact Native。

このオブジェクトをどのようにループさせることができますか？私は単純なforループも使用できることを知っていますが、これは間違いなく最初の選択ではありません...

EDIT：this.setState({users: responseData.users});で_this.state.users_にこの値を保存しました。状態はコンストラクターで定義されます。 this.state.users.map(id => <Text>{id}</Text>)でこれにアクセスしようとしましたが、常に同じエラーが発生します：null is not an object (evaluating 'this.state.users.map')。これは正しいことですか？

loopsreact-nativeforeach
7
Tekk

map または for-of またはその他のいずれかを使用できます

例：

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

エラーごとに、users状態内にデータがない可能性があるため、エラーが発生しています。データが適切な場合、上記の例は適切に動作します

16
Jigar Shah

反応において、好ましい方法は配列のmapメソッドです。 ES6矢印関数を使用した例：

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

Lodash（npm install lodash）を使用して、次を実行することもできます。

import _ from 'lodash';

...

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