Working on a react native application with a sortable ListView, where data is fetched from JSON and updated periodically. However, facing issues as the list does not update in either scenario.
Even after verifying that the array matches expectations before cloning it into the ListView.DataSource, there seems to be no update in the DataSource.
Despite attempting deep cloning of the array, the problem persists.
Below is a snippet showcasing the code:
Initialization of ListViewDataSource:
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => (r1.value !== r2.value)
});
this.state = {
dataSource: ds,
sorting: 'availableCapacity',
sortingOptions: ['name', 'availableCapacity']
}
}
Refreshing/Sorting the array and updating DataSource: (Triggered by a button press or new data arrival)
refreshList(sortBy) {
if (sortBy === undefined)
sortBy = this.state.sortBy;
var array = this.props.dataToSortAndDisplay;
if (sortBy == 'option1')
array.sort(this.sortByVar1);
else if (sortBy == 'option2') {
array.sort(this.sortByVar2);
}
this.setState({
dataSource: this.state.dataSource.cloneWithRows(array)
})
}
Tried deep cloning the array using a recursive function but with no success:
cloneData(data) {
if (data instanceof Array || data instanceof Object) {
var newData = [];
for (var k in data) {
newData[k] = this.cloneData(data[k]);
}
return newData;
}
else {
return data;
}
}
Also attempted cloned using
JSON.parse(JSON.stringify(array))If anyone can assist in identifying what might be incorrect here, it would be greatly appreciated. Struggling with a seemingly simple task of updating a ListView.
Thanks in advance.