aktualisiert this.state.dataSource nicht aktualisiert Listview

Question

Ich habe eine Listview wie:

<ListView 
     dataSource={this.state.dataSource} 
     renderRow={this.renderMovie} 
     style={styles.listView} 
/> 

Es zeigt Zeilen wie:

<View style={styles.container}> 
     <TouchableHighlight onPress={this._onPressButton.bind(this,movie)}> 

     <Image 
      source={{uri: movie.uri}} 
      style={styles.thumbnail} 
     /> 
    </TouchableHighlight> 
    <View style={styles.rightContainer}> 
     <Text style={styles.title}>{movie.id}</Text> 
     <Text style={styles.year}>{movie.votes}</Text> 
    </View> 
    </View> 

Ich habe eine Funktion, die this.state.dataSource aktualisiert mit der Anzahl der "Stimmen" die ein Film hat. Aber diese Änderungen spiegeln sich nicht in der Benutzeroberfläche wider, aber wenn ich die this.state.dataSource protokolliere, sind die Änderungen vorhanden. Muss ich die Zeilen irgendwie neu rendern? Sollten sie sich nicht automatisch ändern?

Danke!

Answer 1

Um React-native das Rendern der Zeilen zu ermöglichen, müssen Sie eine Kopie des Arrays erstellen, Ihr Objekt aktualisieren und dann setState mit Ihrem neu erstellten Array verwenden. Zum Beispiel:

let newArray = this.state.dataSource.slice(); 
newArray[indexToUpdate] = { 
    ...this.state.dataSource[indexToUpdate], 
    field: newValue, 
}; 
this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(newArray), 
}); 

Referenz:

• React-Native Updating List View DataSource
• ListView does not re-render a row when property of an object in datasource array is changed #4104

Answer 2

Ich habe eine ähnliche Situation und das einzige, was ich tun musste, ist:

this.setState({ 
    dataSource: this.ds.cloneWithRows(new_data_for_datasource) 
}) 

Es funktioniert gut für mich. Im Klassenkonstruktor ich den folgenden Code haben:

this.ds = new ListView.DataSource({ 
    rowHasChanged: (row1, row2) => row1 !== row2 
}) 
this.state = { 
    dataSource: this.ds.cloneWithRows(this.props.original_data) 
} 

Hoffe, es hilft!

Answer 3

ich eine Funktion nenne neue Daten zu holen und die Listenansicht mit Klon Option Aktualisierung wie folgt:

fetchCarData(datax) { 
    fetch(REQUEST_URL + '&' + 'place=' + datax) 
     .then((response) => response.json()) 
     .then((responseData) => { 
      this.setState({ 
       dataSource: this.state.dataSource.cloneWithRows(responseData), 
       loaded: true, 
      }); 
      if (responseData.notfound === 'yes') { 
       alert('No Vehicles found'); 
       this.setState({ 
        notfound: 'Not found vehicles, do another search' 
       }) 
      } else { 
       this.setState({ 
        notfound: '' 
       }) 
      } 
     }) 
     .done(); 
}