Update reagieren native Listview auf Kind geändert Ereignis firebase

Question

Ich versuche, eine reaktive native Listview mit Firebase, die automatisch aktualisiert und rer rendert die Liste, wenn sich Daten ändern.

Ich betreibe meine Anfragen in componentDidMount

async componentDidMount(){ 

let userId = await AsyncStorage.getItem('workUserId') 

this.chatIdRef.child(userId).orderByChild('timeStamp').on('child_added', snap => { 
this.chatsRef.child(snap.key).on('value', snapshot => { 
     this.handleEvent("child_added", snap.val().userId, snapshot.val().text, snap.val().userName, snap.key); 
    }); 
}); 

this.chatIdRef.child(userId).orderByChild('timeStamp').on('child_changed', snap => { 
    this.chatsRef.child(snap.key).on('value', snapshot => { 
     this.handleEvent("child_changed", snap.val().userId, snapshot.val().text, snap.val().userName, snap.key); 
    }); 
    }); 
} 

und dann zu einem Fall entweder ein Kind hinzugefügt Ereignis oder ein Kind laufen geändert

handleEvent(event, receiverId, text, name, key) { 
switch (event) { 
case "child_added": 
    this.items.push({event: event, receiverId: receiverId, text: text, name: name, key: key}) 
    this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(this.items) 
    }); 
break; 

case "child_changed": 
    this.items.push({event: event, receiverId: receiverId, text: text, name: name, key: key}) 
    this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(this.items) 
    }); 
break; 
}} 

Wenn ich Daten in Feuerbasis der Listenansicht nicht ändert Update entsprechend, es fügt nur eine weitere Zeile hinzu. Ich bin mir nicht sicher, ob mein Problem darin besteht, nativ zu reagieren oder wie ich meine Firebase-Abfragen ausführe.

Answer 1

Es wird nur eine neue Zeile hinzugefügt, da Sie den Wert nicht aktualisiert haben. Sie schieben einfach ein Element in ein Array, so dass ein Element hinzugefügt wird, das nicht aktualisiert wird.

Sie müssen Code von case "child_changed" wie sich ändern:

let newArray = oldArray.slice(); 
newArray[indexToUpdate] = { 
    ...oldArray[indexToUpdate], 
    field: newValue, 
}; 
let newDataSource = oldDataSource.cloneWithRows(newArray); 

Sie diesen lesen von here