React natif: Essayez d'afficher les données de Firebase dans une liste

Question

Salut, je suis en train d'afficher une liste des données de mon Firebase DB, mais je suis bloqué en ce moment:/

Voici mon code:

Demande mes données:

this.tasksRef = firebase.database().ref('/store'); 
    const dataSource = new ListView.DataSource({ 
    rowHasChanged: (row1, row2) => row1 !== row2, 
    }); 
    this.state = { 
    loaded: false, 
    dataSource: dataSource 
    }; 

Essayer de faire quelque chose si mes données changent:

componentWillMount() { 
    // start listening for firebase updates 
    this.listenForTasks(this.tasksRef); 
} 

listenForTasks(tasksRef) { 
    tasksRef.on('value', (dataSnapshot) => { 
    var tasks = []; 
    dataSnapshot.forEach((child) => { 
    tasks.push({ 
     name: child.val().title, 
     _key: child.key 
    }); 
    }); 

    this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(tasks) 
    }); 
}); 
} 

Et mon render:

render(){ 
    return (
    <View style={styles.container}> 
    <Header text="Account" loaded={this.state.loaded} /> 
    <ListView 
     dataSource={this.state.dataSource} 
     enableEmptySections={true} 
     renderRow={this._renderItem.bind(this)} 
     style={styles.listView}/> 
    </View> 
); 
} 

Je suis en train d'apprendre à réagir de façon grâce avance pour votre aide :)

Answer 1

Pour créer votre liste essayer le ci-dessous. Vous créez d'abord une fonction createDataSource que vous pouvez appeler à la fois sur componentWillReceiveProps et sur componentWillMount. Passez ensuite ce à la liste

class ListingDemo extends Component { 
    componentWillMount() { 
    this.createDataSource(this.props.listing) // the listing from your firebase connection 
    } 

    componentWillReceiveProps ({ listing }) { 
    // this.props are the old props 
    this.createDataSource(listing) 
    } 

    createDataSource (listing) { 
    const ds = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2 
    }) 

    this.dataSource = ds.cloneWithRows(listing) 
    } 
} 

alors sur votre fonction render

<ListView 
    dataSource={this.dataSource} 
    renderRow={this.renderRow} 
/> 

Laissez-moi savoir si cela aide

MISE À JOUR: Vous devez récupérer correctement les données de firebase ainsi de suite la La fonction componentWillMount ajoute la suivante.

tasksRef.on('value', (snap) => { 

     // get children as an array 
     var items = []; 
     snap.forEach((child) => { 
     items.push({ 
      title: child.val().title, 
      _key: child.key 
     }); 
     }); 

     createDataSource(items) 

    }); 

Answer 2

Voici mon code mis à jour maintenant:

constructor(props){ 
    super(props); 
    this.props.listing = firebase.database().ref('/store'); 

    this.state = { 
     loaded: false, 
    }; 
    } 
    componentWillMount() { 
    this.createDataSource(this.props.listing) 
    } 

    componentWillReceiveProps ({ listing }) { 
    this.createDataSource(listing) 
    } 

    createDataSource ({listing}) { 
    const ds = new ListView.DataSource({ 
    rowHasChanged: (r1, r2) => r1 !== r2 
    }) 

    this.dataSource = ds.cloneWithRows(listing) 
    } 

    render(){ 
    return (
    <View style={styles.container}> 
     <Header text="Account" loaded={this.state.loaded} /> 
     <ListView 
     dataSource={this.dataSource} 
     renderRow={this.renderRow} 
     /> 
    </View> 
    ); 
    } 

Je suis cette erreur:

non définie est pas un objet (evaluationg 'ref2.listing')

Merci pour votre aide, j'essaie d'apprendre comment ça fonctionne.

Answer 3

MISE À JOUR:

Alors, voici mon code maintenant, je suis arrivé cette erreur

valeur de renderRow est vide

constructor(props){ 
    super(props); 
    this.state = { 
    dataSource: new ListView.DataSource({ 
    rowHasChanged: (row1, row2) => row1 !== row2, 
    }), 
    loaded: false 
}; 
this.itemsRef = this.getRef().child('items'); 
} 

getRef() { 
return firebase.database().ref('/store'); 
} 

listenForItems(itemsRef) { 
itemsRef.on('value', (snap) => { 
    // get children as an array 
    var items = []; 
    snap.forEach((child) => { 
    items.push({ 
     title: child.val().title, 
     _key: child.key 
    }); 
    }); 
    this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(items) 
    }); 

}); 
} 

componentDidMount() { 
this.listenForItems(this.itemsRef); 
} 

render(){ 
return (
    <View style={styles.container}> 
    <Header text="Account" loaded={this.state.loaded} /> 
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this.renderRow} 
    /> 
    </View> 
); 
} 

: /: /:/