React Native Flatlist renvoie le mauvais nombre de lignes vides

Question

Lorsque j'exécute le code ci-dessous, il affiche 3 lignes vides. Il devrait afficher deux lignes avec une couleur et une date de fin et je veux utiliser le 'Parent' comme clé unique. Le 'Parent' est la clé unique créée par Firebase lorsque la couleur et enddate ont été poussés vers Firebase avec '.push'.

J'ai essayé toutes sortes de choses pour l'afficher. J'ai obtenu du contenu à afficher lorsque j'ai rendu le 'renderItems' return 'this.state.list', mais cela a retourné 3 lignes toutes avec les mêmes données, qui est le contenu du dernier tableau dans le journal de la console.

J'apprécierais vraiment de l'aide pour que cela fonctionne.

Voici le code, une copie de la base de données Firebase et le fichier console.log. Veuillez noter que le 'but' Firebase a été changé en 'couleur'.

import React, { Component } from 'react'; 
 
import { Text, FlatList, View, Image } 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 = { 
 
     list: [], 
 
    }; 
 
    } 
 

 
componentDidMount() { 
 
    const { currentUser } = firebase.auth(); 
 
    const Parent = firebase.database().ref(`/users/${currentUser.uid}/Profile`); 
 

 
    Parent.on(('child_added'), snapshot => { 
 
     this.setState({ list: [snapshot.key, snapshot.val().color, snapshot.val().enddate] }); 
 

 
    console.log(this.state.list); 
 
    }); 
 
} 
 

 
keyExtractor = (item, index) => index; 
 

 
render() { 
 
    return (
 
    <Card> 
 
     <View style={{ flex: 1 }}> 
 
     <FlatList 
 
      data={this.state.list} 
 
      keyExtractor={this.keyExtractor} 
 
      extraData={this.state} 
 
      renderItem={({ item }) => (
 
      <Text style={styles.listStyle}> 
 
       { item.color } 
 
       { item.enddate } 
 
      </Text> 
 
     )} 
 
     /> 
 
     </View> 
 

 
     <CardSection> 
 
     <Button 
 
      style={{ 
 
      flex: 1, 
 
      flexDirection: 'row' 
 
      }} 
 

 
      onPress={() => this.props.navigation.navigate('NextPage', { name: 'user' })} 
 
      title="Go to next page" 
 
     > 
 
      Go to next page 
 
     </Button> 
 
     </CardSection> 
 
    </Card> 
 
    ); 
 
    } 
 
} 
 

 
export { List };

Answer 1

C'est la bonne façon de stocker la liste

componentDidMount() { 
    const { currentUser } = firebase.auth(); 
    const Parent = firebase.database().ref(`/users/${currentUser.uid}/Profile`); 

    Parent.on(('child_added'), snapshot => { 
     const newChild = { 
      key: snapshot.key, 
      color: snapshot.val().color, 
      enddate: snapshot.val().enddate 
     } 
     this.setState((prevState) => ({ list: [...prevState.list, newChild] })); 

    console.log(this.state.list); 
    }); 
} 

et votre keyExtractor

keyExtractor = (item, index) => item.key;