ListView does not rerender after state change in react-native? - react-native

Question

I am working on <ListView> component, I have a list of names but after changing the state, it's changing the values, but it's not re-rendering the ListView.
isSelect:false - (State)
isSelect:true - (State)
Code:
var designerName = [{id: 'Calvin Klein', name: 'Calvin Klein', isSelected: false},
{id: 'Donatella Versace', name: 'Donatella Versace', isSelected: false},
{id: 'Valentino Garavani', name: 'Valentino Garavani', isSelected: false},
{id: 'Giorgio Armani', name: 'Giorgio Armani', isSelected: false}];
export default class filter extends Component {
constructor() {
super();
const listDs = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
});
this.state = {
listDs:designerName
};
}
componentDidMount(){
this.setState({
designerDataSource:this.state.designerDataSource.cloneWithRows(this.state.listDs),
})
}
render() {
return (
<View>
<ListView
dataSource={this.state.designerDataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
renderRow(item){
return (
<TouchableHighlight key={item.id} onPress={this.onItemDesigner.bind(this, item)}>
<View>
<View>
{this.renderName(item)}
</View>
<View>
<Text>{item.name}</Text>
</View>
</View>
</TouchableHighlight>
);
}
renderName(item){
if(item.isSelected) {
return(
<Image
style={{
width: 15,
height:15}}
source={require('../images/black_tick_mark.png')} />
);
}
}
onItemDesigner(item){
var tempDesigner = this.state.listDs.slice();
for(var i=0; i<tempDesigner.length; i++){
if (tempDesigner[i].id == item.id && !tempDesigner[i].isSelected) {
tempDesigner[i].isSelected = true;
}else if (tempDesigner[i].id == item.id && tempDesigner[i].isSelected){
tempDesigner[i].isSelected = false;
}
}
this.setState({
designerDataSource: this.state.designerDataSource.cloneWithRows(tempDesigner),
});
}
}
Please kindly go through my above code and let me know, if you find any solution.
Thanks

Answer 1

The issue is part Javascript, part ListView. It stems from this function when you construct the ListView.DataSource.
const listDs = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
});
The rowHasChanged is what controls if a render should happen, and it's checking to see if the old object equals the new object.
Comparing two objects together doesn't return false if one of the items has changed. It's checking to see if the actual object itself is pointing to a different memory location.
Consider these examples.
let array1 = [{foo: 'bar'}]
let array2 = array1.slice()
// sliced array still contains references to the items
console.log(array2[0] === array1[0])
// => true
// change something in array1
array1[0].foo = 'test'
// you'll see the change in array2 as well
console.log(array2[0].foo)
// => 'test'
To make it have a new variable location, you can either create an empty {} object and iterate through the original keys and save the key/values to the new one, or, a little easier is to use JSON.parse(JSON.stringify(obj)) to clone the object.
array2[0] = JSON.parse(JSON.stringify(array1[0]))
console.log(array2[0] === array1[0])
// => false
You could technically clone the whole array that way, or only the one that changed. I would imagine it would be more efficient to only do it on the changed object to prevent unneeded renders.
Check out Object equality in JavaScript.