Comment avoir plusieurs listes d'objets avec des données filtrées dans React Native

Question

Comment créer plusieurs listes d'objets qui ne présentent que des données avec un type d'état?

Par exemple:

• Un Flatlist pour le statut === 'InProgress de
• Un Flatlist pour le statut === 'Fait'
• Un Flatlist pour le statut === « Failed '

Toutes les données sont dans le tableau' goallist ', qui provient d'une base de données Firebase.

J'apprécierais vraiment votre aide avec ceci.

import React, { Component } from 'react'; 
 
import { Text, FlatList, View, Image, TouchableOpacity, Alert } from 'react-native'; 
 
import firebase from 'firebase'; 
 
import { Button, Card, CardSection } from '../common'; 
 
import styles from '../Styles'; 
 

 
class List extends Component { 
 

 
    static navigationOptions = { 
 
     title: 'List', 
 
    } 
 

 
    constructor(props) { 
 
     super(props); 
 

 
     this.state = { 
 
      goallist: '', 
 
      loading: false, 
 
    }; 
 
    } 
 

 
componentDidMount() { 
 
    this.setState({ loading: true }); 
 
    const { currentUser } = firebase.auth(); 
 
    const keyParent = firebase.database().ref(`/users/${currentUser.uid}/goalProfile`); 
 
    keyParent.on(('child_added'), snapshot => { 
 
     const newChild = { 
 
      key: snapshot.key, 
 
      goal: snapshot.val().goal, 
 
      status: snapshot.val().status 
 
     }; 
 
     this.setState((prevState) => ({ goallist: [...prevState.goallist, newChild] })); 
 
     console.log(this.state.goallist); 
 
     }); 
 

 
this.setState({ loading: false }); 
 
} 
 

 
onRenderItem = ({ item }) => (
 
    <TouchableOpacity onPress={this.showAlert}> 
 
     <Text style={styles.listStyle}> 
 
      { item.goal } { item.key } 
 
     </Text> 
 
    </TouchableOpacity> 
 
); 
 

 
showAlert =() => { 
 
    Alert.alert(
 
     'Did you succeed or fail?', 
 
     'Update your status', 
 
    [ 
 
     { text: 'Completed?', 
 
       onPress:() => console.log('Completed Pressed'),    }, 
 
     { text: 'Failed?', 
 
       onPress:() => console.log('Failed Pressed'), 
 
     }, 
 
     { text: 'Cancel', 
 
       onPress:() => console.log('Cancel Pressed'), 
 
       style: 'cancel' }, 
 
    ], 
 
     { cancelable: false } 
 
    ); 
 
} 
 

 
keyExtractor = (item) => item.key; 
 

 
render() { 
 
    return (
 
    <Card> 
 

 
     <View style={{ flex: 1 }}> 
 
     <FlatList 
 
      data={this.state.goallist} 
 
      keyExtractor={this.keyExtractor} 
 
      extraData={this.state} 
 
      renderItem={this.onRenderItem} 
 
     /> 
 
     </View> 
 

 
    </Card> 
 
    ); 
 
    } 
 
} 
 

 
export { List };

Answer 1

Vous avez juste besoin de modifier votre fonction onRenderItem pour rendre certains objets spécifiques comme ci-dessous (ce Flatlist ne montre que des objets InProgress):

onRenderItem = ({ item }) => { 
    if (item.type === 'inProgress') { 
    return (
     <TouchableOpacity onPress={this.showAlert}> 
     <Text style={styles.listStyle}> 
      { item.goal } { item.key } 
     </Text> 
     </TouchableOpacity> 
    ) 
    } else { return null; } 
};