React Native evaluating 'dataSource.rowIdentities - react-native

Question

I'm making a basic ListView with dataSource in React-Native, with data that I fetch.
class Movies extends Component {
render() {
if (this.state.dataSource.getRowCount() === 0) {
return (
<View style={styles.container}>
<Text>
loading....
</Text>
</View>
);
}
else {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
}
constructor(props){
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
};
}
componentWillMount() {
this.fetchData();
}
fetchData(){
fetch(HOT_MOVIES_URL)
.then((response) => response.json())
.then((responseData) => {
if (responseData) {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData),
});
}
})
.done();
}
}
yet, I get a
undefined is not an object (evaluating 'dataSource.rowIdentities')
error, tried many ways is also not work contain this question, Any ideas?

Answer 1

Try setting up the ListView DataSource as a reusable variable, then reusing it whenever you need it. Also, you may be needing to set the dataSource as an empty array until your data comes in. Try something like this:
var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 })
class Movies extends Component {
render() {
if (this.state.dataSource.getRowCount() === 0) {
return (
<View style={styles.container}>
<Text>
loading....
</Text>
</View>
);
}
else {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
}
constructor(props){
super(props);
this.state = {
dataSource: ds.cloneWithRows([]),
};
}
componentWillMount() {
this.fetchData();
}
fetchData(){
fetch(HOT_MOVIES_URL)
.then((response) => response.json())
.then((responseData) => {
if (responseData) {
this.setState({
dataSource: ds.cloneWithRows(responseData),
});
}
})
.done();
}
}

Answer 2

This problem seems to be caused by trying to render ListView with a falsy list.
I just opened an app I hadn't used in like 6 months and it exploded fantastically because the database was wiped and this ListView was trying to render and getting an empty list from Redux mapStateToProps.
Long debug story short, I put an empty list check in the render method:
render() {
if (!this.props.employees.length) {
return (
<View>
<Text>NO EMPLOYEES TO LIST</Text>
</View>
)
}
return (
<ListView
enableEmptySections
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
)
}
If you somehow keep getting it after that, put a falsy check in renderRow.