React-Native Updating List View DataSource
Mam aplikację na iOS, którą tworzę z React-native. Klasa gry zawiera komponent ListView. Ustawiam stan w konstruktorze i dołączam dataSource
. Mam teraz zakodowaną na twardo tablicę danych, którą przechowuję w innej właściwości state (this.state.ds
). Następnie w componentDidMount
używam metody cloneWithRows
, aby sklonować moje this.state.ds
jako źródło danych dla widoku. Jest to dość standardowe, jeśli chodzi o ListViews i działa dobrze. Oto kod:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require("react-native");
var { StyleSheet, Text, View, ListView, TouchableHighlight } = React;
class Games extends React.Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 != r2
});
this.state = {
ds: [
{ AwayTeam: "TeamA", HomeTeam: "TeamB", Selection: "AwayTeam" },
{ AwayTeam: "TeamC", HomeTeam: "TeamD", Selection: "HomeTeam" }
],
dataSource: ds
};
}
componentDidMount() {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.state.ds)
});
}
pressRow(rowData) {
var newDs = [];
newDs = this.state.ds;
newDs[0].Selection = newDs[0] == "AwayTeam" ? "HomeTeam" : "AwayTeam";
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newDs)
});
}
renderRow(rowData) {
return (
<TouchableHighlight
onPress={() => this.pressRow(rowData)}
underlayColor="#ddd"
>
<View style={styles.row}>
<Text style={{ fontSize: 18 }}>
{rowData.AwayTeam} @ {rowData.HomeTeam}{" "}
</Text>
<View style={{ flex: 1 }}>
<Text style={styles.selectionText}>
{rowData[rowData.Selection]}
</Text>
</View>
</View>
</TouchableHighlight>
);
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
);
}
}
var styles = StyleSheet.create({
row: {
flex: 1,
flexDirection: "row",
padding: 18,
borderBottomWidth: 1,
borderColor: "#d7d7d7"
},
selectionText: {
fontSize: 15,
paddingTop: 3,
color: "#b5b5b5",
textAlign: "right"
}
});
module.exports = Games
Problem, który mam, pojawia się w pressRow
metoda. Kiedy użytkownik naciska wiersz, chciałbym, aby Wybór się zmienił i aby renderował zmianę na urządzeniu. Poprzez pewne debugowanie zauważyłem, że chociaż zmieniam właściwość {[7] } obiektu w tablicy newDs
, ta sama właściwość zmienia się na obiekcie w this.state.ds
i podobnie zmienia obiekt w this.state.dataSource._dataBlob.s1
. Dzięki dalszemu debugowaniu odkryłem, że ponieważ te inne tablice się zmieniły, obiekt Datasource ListView nie rozpoznaje tej zmiany, ponieważ gdy Ustawiłem stan i rowHasChanged
jest wywoływany, tablica, którą klonuje, pasuje do tablicy this.state.dataSource._dataBlob.s1
i tak nie wygląda jak zmiana i nie rerender.
3 answers
Spróbuj tego:
pressRow(rowData){
var newDs = [];
newDs = this.state.ds.slice();
newDs[0].Selection = newDs[0] == "AwayTeam" ? "HomeTeam" : "AwayTeam";
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newDs)
})
}
To powinno tworzyć kopię tablicy, która może być modyfikowana niezależnie od oryginalnej tablicy w this.state.ds
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-31 06:46:43
Jeśli ktoś natknie się na ten problem, tak jak ja, oto kompletne rozwiązanie.
Zasadniczo wydaje się, że jest błąd w komponencie ListView i musisz przebudować każdy element, który zmienia się w źródle danych, aby ListView mógł go ponownie narysować.
Najpierw Utwórz źródło danych i kopię tablicy i zapisz je do stanu. W moim przypadku foods
jest tablicą.
constructor(props){
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.state = {
dataSource: ds.cloneWithRows(foods),
db: foods,
};
}
Jeśli chcesz zmienić coś w datasource, zrób kopię tablicy zapisanej do stanu, odbudować element ze zmianą, a następnie zapisać nową tablicę ze zmianą z powrotem do stanu (zarówno db jak i datasource).
onCollapse(rowID: number) {
console.log("rowID", rowID);
var newArray = this.state.db.slice();
newArray[rowID] = {
key: newArray[rowID].key,
details: newArray[rowID].details,
isCollapsed: newArray[rowID].isCollapsed == false ? true : false,
};
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newArray),
db: newArray,
});
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-15 17:42:31
React jest wystarczająco inteligentny, aby wykryć zmiany w źródle danych i czy lista powinna zostać ponownie wyrenderowana. Jeśli chcesz zaktualizować listView, utwórz nowe obiekty zamiast aktualizować właściwości istniejących obiektów. Kod wyglądałby mniej więcej tak:
let newArray = this._rows.slice();
newArray[rowID] = {
...this._rows[rowID],
Selection: !this._rows[rowID].Selection,
};
this._rows = newArray;
let newDataSource = this.ds.cloneWithRows(newArray);
this.setState({
dataSource: newDataSource
});
Możesz przeczytać więcej o podobnym numerze na Githubie
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-01 18:29:13