Listview mit Abschnittsüberschriften werden nicht aktualisiert, wenn Daten

Question

ändern Ich versuche, eine Listenansicht mit Abschnittsüberschriften zu aktualisieren, aber die Aussicht nicht ändert: https://rnplay.org/apps/WJ1cEw

Hier ist der Code ist, wo ich die Listenansicht zu aktualisieren versuche :

changeData(){ 
    var dataTemp = Object.assign({},data); 
    dataTemp.Section1[0] = {title: 'New content for Row 1, Section 1'}; 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRowsAndSections(dataTemp) 
    }); 
} 

kann ich sehen, dass rowHasChanged läuft, aber row1 und beide row2 die neuen Daten enthalten, so dass es auf true nie auswertet.

Wenn ich immer true zurück von rowHasChanged das Listview aktualisiert wird, aber ich denke, dass die gesamte Listview bedeutet erneut gerendert wird.

Answer 1

Zuerst bist du nichts von Ihrer rowHasChanged Funktion Rückkehr:

this.state = { 
     dataSource: new ListView.DataSource({ 
      rowHasChanged : (row1, row2) => { 
       console.log(row1.title + ' ' + row2.title); 
       return row1 !== row2; // <--- MISSING RETURN 
      }, 
      sectionHeaderHasChanged : (s1, s2) => s1 !== s2 
     }) 
    }; 

Zweitens Object.assign ist eine flache verschmelzen. Sie haben Arrays drin, die von Ref trotzdem gestampft werden, obwohl Sie versuchen, changeData rein zu machen. Die beste Option besteht darin, Ihre Abschnitte basierend auf der flachen Liste realer Daten jedes Mal zu berechnen, wenn Sie changeData aufrufen, anstatt die Abschnitte als Teil des Status zu speichern. Andernfalls können Sie zuerst einen tiefen Klon mit lodash.cloneDeep erstellen.

changeData(){ 
    data = _.cloneDeep(data) 

    data.Section1[0] = {title: 'New content for Row 1, Section 1'}; 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRowsAndSections(data) 
    }); 
} 

Der bessere Ansatz, den ich erwähnt würde Array.prototype.reduce verwenden:

const data = data.reduce((blob, dataItem) => { 
    const section = 'ComputedSectionLabel'; 
    blob[section] = blob[section] || []; 
    blob[section].push(dataItem); 
}, {}); 

this.setState({ 
    dataSource: this.state.dataSource.cloneWithRowsAndSections(data) 
});