Reactive Native ListView-Zeile wird nach Statusänderung nicht erneut gerendert

Question

Native ListView reagieren: Zeilen werden nicht neu gerendert, nachdem sich der Datenquellenstatus geändert hat.

Hier ist eine vereinfachte Version von meinem Code:

render(): { 
    return <ListView 
    dataSource={this.state.DS} 
    renderRow={this.renderRow}/> 
} 

renderRow(item): { 
    return <TouchableOpacity onPress={() => this.handlePress(item)}> 
    {this.renderButton(item.prop1)} 
    </TouchableOpacity> 
} 

renderButton(prop1): { 
    if (prop1 == true) { 
    return <Text> Active </Text> 
    } else { 
    return <Text> Inactive </Text> 
    } 
} 

handlePress(item): { 
    **Change the prop1 of *item* in an array (clone of dataSource), then** 
    this.setState({ 
    DS: this.state.DS.cloneWithRows(arrayFromAbove) 
    }) 
} 

Nach Facebook Beispiel wird Listview soll jede Datenquelle geändert wird rerender. Liegt es daran, dass ich nur eine Eigenschaft eines Elements in der Datenquelle ändere? Es scheint, als ob die renderRow-Funktion nicht erneut gerendert wird, sondern die render() -Funktion aus einer Datenquellenänderung stammt.

Vielen Dank.

Answer 1

Zuerst müssen Sie die datasource in der getInitialState Funktion einstellen. Ändern Sie dann die Datenquelle, indem Sie this.setState({}) aufrufen und die neue Datenquelle übergeben. Es sieht so aus, als ob Sie oben auf der richtigen Spur waren, aber ich habe ein funktionierendes Beispiel von eingerichtet, das die ListView Datenquelle here ändert. Ich hoffe, die

https://rnplay.org/apps/r3bzOQ

Answer 2

hilft reagieren intelligent genug, um Veränderungen in der Datenquelle zu erkennen und, wenn die Liste sollte neu gerendert werden. Wenn Sie listView aktualisieren möchten, erstellen Sie neue Objekte, anstatt die Eigenschaften vorhandener Objekte zu aktualisieren. Der Code würde wie folgt aussehen:

let newArray = this._rows.slice(); 
newArray[rowID] = { 
    ...this._rows[rowID], 
    newPropState: true, 
}; 
this._rows = newArray; 

let newDataSource = this.ds.cloneWithRows(newArray); 
this.setState({ 
    dataSource: newDataSource 
}); 

Sie können mehr über ähnliche issue on Github