Ricarica ListView Non funziona Reagire Native

Question

Re-fraseggio mia interrogazione ... (Testato con classe separata)

che sto cercando di ricaricare listview con allineamento caso su pressione di un pulsante. Ma non funziona! Cercando di fare l'aggiornamento datasource questo con i seguenti LOC:

_buttonPressed() { 
     this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(this._randomArray()), 
     }); 
    } 

_randomArray() { 

    var jsonRes; 

    switch(this.getRandomInt()) // number returned is valid. I checked 
    { 
     case 1: 
     { 
      jsonRes = '[' + 
      '{ "firstName":"Michel" , "lastName":"John" ,"age":18},' + 
      '{ "firstName":"Richard" , "lastName":"Joe","age":20 },' + 
      '{ "firstName":"James" , "lastName":"Henry","age":15 },' + 
      '{ "firstName":"e" , "lastName":"u","age":15 }]'; 
      break; 
     } 
     case 2: 
     { 
      jsonRes = '[' + 
      '{ "firstName":"bacde" , "lastName":"John" ,"age":18},' + 
      '{ "firstName":"bacde" , "lastName":"Joe","age":20 },' + 
      '{ "firstName":"bacde" , "lastName":"Henry","age":15 },' + 
      '{ "firstName":"ebacde" , "lastName":"u","age":15 }]'; 
      break; 
     } 
     case 3: 
     { 
      jsonRes = '[' + 
      '{ "firstName":"mmmmm" , "lastName":"John" ,"age":18},' + 
      '{ "firstName":"mmmmm" , "lastName":"Joe","age":20 },' + 
      '{ "firstName":"mmmmm" , "lastName":"Henry","age":15 },' + 
      '{ "firstName":"etttttt" , "lastName":"u","age":15 }]'; 
      break; 
     } 
     default: 
     { 
      jsonRes = '[' + 
      '{ "firstName":"dddd" , "lastName":"John" ,"age":18},' + 
      '{ "firstName":"dddd" , "lastName":"Joe","age":20 },' + 
      '{ "firstName":"dddd" , "lastName":"Henry","age":15 },' + 
      '{ "firstName":"ehhgh" , "lastName":"u","age":15 }]'; 
      break; 
     } 
    } 

    var myObject = eval('(' + jsonRes + ')'); 
    return myObject; 

}

ho già visto esempi di progetti di ListView React Native. Stanno usando dataSource.cloneWithRows per questo scopo. Non so quale piccola cosa mi manca. Per favore aiutami a risolvere questo problema ... Grazie!

Answer 1

Sono stato in grado di eseguire correttamente il debug del problema. Ho appena aperto il codice sorgente per ListViewDataSource.js e tracciato il valore della variabile datablob trasmesso lungo le diverse funzioni.

Un metodo _calculateDirtyArrays identifica quali righe sono state modificate e devono essere aggiornate. Per questo, una delle tre condizioni deve corrispondere per una riga.

........ 
    // dirty if the section is new, row is new or _rowHasChanged is true 
    dirty = 
     !prevSectionsHash[sectionID] || 
     !prevRowsHash[sectionID][rowID] || 
     this._rowHasChanged(
     this._getRowData(prevDataBlob, sectionID, rowID), 
     this._getRowData(this._dataBlob, sectionID, rowID) 
    ); 
    this._dirtyRows[sIndex].push(!!dirty); 
........ 

_rowHasChanged è quello passato al List Datasource costruttore.

var dataSource = new ListView.DataSource(
{rowHasChanged: (r1, r2) => r1.guid !== r2.guid}); 

Questo è stato nel mio caso errato, poiché la riga deve essere modificata quando i dati corrispondenti cambiano. Ho cambiato la condizione di cui sopra per il mio requisito.

var dataSource = new ListView.DataSource(
     { 
      rowHasChanged: function(r1, r2) : bool { 
       return (
       (r1["firstName"] !== r2["firstName"]) || 
       (r1["lastName"] !== r2["lastName"]) || 
       (r1["age"] !== r2["age"]) 
       ); 
      } 
     }); 

e voilà! Funziona perfettamente ora. Speriamo che aiuti qualcuno in futuro!