Trouble getting ListView to re-render - react-native

Question

I'm trying to force a ListView to rerender, only the changed rows.
The documentation suggests rowHasChanged function. I'm not sure if I'm using it correctly.
here's the redacted code for reference, which doesn't work for me:
'use strict'
import React from 'react-native';
import {
ListView,
View,
TouchableOpacity,
Component
}
from 'react-native';
export default class Follows extends Component {
constructor() {
super()
this.state = {
apiData: [],
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1.id !== row2.id || row1.following !== row2.following
})
};
}
_fetchData() {
fetch(some_url)
.then((response) => response.json())
.then((responseData) => {
this.state.apiData = responseData.data;
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.state.apiData),
});
})
.catch((error) => {
callOnFetchError(error, some_url);
}).done();
})
}
componentDidMount() {
this._fetchData()
}
_follow(id, shouldFollow) {
const refreshedData = this.state.apiData.map(user => {
if (user.id === id)
user.following = shouldFollow ? 1 : 0;
return user;
})
this.setState({
dataSource: this.state.dataSource.cloneWithRows(refreshedData),
})
}
_renderRow() {
return (
<TouchableOpacity
onPress = {this._follow.bind(this, 37, true}>
/* some view */
</TouchableOpacity>
)
}
render () {
return (
<View style={styles.container}>
<ListView
style={styles.listView}
dataSource={ this.state.dataSource }
renderRow={this._renderRow()}
</ListView >
< /View>
)
}
}

Answer 1

Try the below setup. There are two things I think that are making the functionality not work for you:
1 - The way you are referring to your dataSource as this.state.dataSource.cloneWithRows. Instead, try setting a variable like below:
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
Then using it like this:
this.setState({
dataSource: ds.cloneWithRows(responseData.data),
});
2 - Instead of this:
this.state.apiData = responseData.data;
Try this:
this.setState({
apiData: responseData.data
})
Overall, I've changed the original code to the below, which I think should work:
'use strict'
import React from 'react-native';
import {
ListView,
View,
TouchableOpacity,
Component
}
from 'react-native';
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
export default class Follows extends Component {
constructor() {
super()
this.state = {
apiData: [],
dataSource: ds.cloneWithRows([])
};
}
_fetchData() {
fetch(some_url)
.then((response) => response.json())
.then((responseData) => {
this.setState({
apiData: responseData.data,
dataSource: ds.cloneWithRows(responseData.data),
});
})
.catch((error) => {
callOnFetchError(error, some_url);
}).done();
})
}
componentDidMount() {
this._fetchData()
}
_follow(id, shouldFollow) {
const refreshedData = this.state.apiData.map(user => {
if (user.id === id)
user.following = shouldFollow ? 1 : 0;
return user;
})
this.setState({
dataSource: ds.cloneWithRows(refreshedData),
})
}
_renderRow() {
return (
<TouchableOpacity
onPress = {this._follow.bind(this, 37, true}>
/* some view */
</TouchableOpacity>
)
}
render () {
return (
<View style={styles.container}>
<ListView
style={styles.listView}
dataSource={ this.state.dataSource }
renderRow={this._renderRow()}
</ListView >
< /View>
)
}
}