FirebaseのFlatListのデータをレンダリングする

Question

私はReact Native 0.49を使用しています。私はfirebaseからデータを取得しました。ユーザーのリストusers/、このリストの各項目はこのように設定されていますfirebase.database().ref('users/' + userId).set(userInfo) userIdは現在のユーザーのuidです。私は「かわからない、

export function getPeople(){ 
    return (dispatch) => { 
     dispatch(getPeopleRequest()); 
     getData().then(result => { 
      dispatch(getPeopleSuccess(result.val())) 
     }) 
     .catch(error => { 
      dispatch(getPeopleFailure(error)) 
     }); 
    } 
} 

const getData =() => { 
    const userRef = firebase.database().ref('users/').limitToFirst(20); 
    return userRef.once('value');  
} 

コンポーネントで、私はFlatListでデータをレンダリングしようとしていますが、それは何をレンダリングていない： - （Reduxのアクションで）

は、今私は戻ってフェッチしていますmは間違っている：

componentDidMount(){ 
    this.props.getPeople(); 
} 
_renderItem = ({ item }) => (

    <View style={{flex: 1}}> 
     <Text>{item}</Text> 
    </View> 
); 

render(){ 
    const { inProgress, people, error } = this.props.peopleData; 
    return (
     <FlatList 
      data={people} 
      renderItem={this._renderItem} 
     /> 
    ); 
} 

コンソールログpeopleが、これが結果です：Oの配列を除いて {cpycwkz7exVBzmhaLEtHjMW66wn1: {…}, UbIITfUANmb63cYE2x7dZRZ0pfK2: {…}}

Answer 1

FlatListコンポーネントがdataを期待することlodashモジュールをインストールして実行する_.values（）関数を使用することができpropを配列にする。これをObjectとして渡しています。オブジェクトの配列に変更することができます。あなたのを変換することができ<Text>SOME_TEXT_NOT_AN_OBJECT</Text>

：その後もあなたの_renderItem方法itemが対象となり、それが<Text>ですぐにレンダリングすることができないで、あなたはとアイテムオブジェクトから、それをレンダリングするよりもテキスト値を抽出する必要があり人々は、アレイに反対し、このような<FlatListに渡し：

render(){ 
    const { inProgress, people, error } = this.props.peopleData; 
    let ArrayOfPeopleObject = Object.values(people) 
    return (
     <FlatList 
      data={ArrayOfPeopleObject} 
      renderItem={this._renderItem} 
     /> 
    ); 
} 

今_renderItem方法における各itemが対象となり、あなたが任意のキーから値を抽出し、<Text>でそれをレンダリングすることができます。

Answer 2

フラットリストbjectsしかしfirebaseのようなマップとしてデータを返す：あなたは配列にこのマップを変換する必要がありますので{キー値}の対は、