undefined is not an object (evaluating 'allRowsIDs.length') (React-Native)

Question

I'm very new to React-Native. Following the basic React-Native tutorial I'm trying to fetch JSON data from "https://facebook.github.io/react-native/movies.json". I can display the title and description properties but when I try to display the "movies" property using a ListView I get the following error:

undefined is not an object (evaluating 'allRowsIDs.length')

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView
} from 'react-native';

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class AwesomeProject extends Component {
  constructor(props) {
    super(props);
    this.state = { 
        dataSource: 'init',
    };
  }

  componentWillMount() {
    fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({ dataSource: ds.cloneWithRows(responseJson.movies) });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {
      return (
        <View style={styles.container}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => <Text>{rowData}</Text>}
          />
        </View>
      );
  }
}

Answer 1

Your initial problem is that you've set this.state.dataSource to the string 'init'. You want that to be pointing to the datasource that you declared earlier.

You can solve your first problem, if you change:

this.state = { 
   dataSource: 'init',
};

to this:

this.state = {
   dataSource: ds
};

However, that's just going to get you to a new error message. Something to the effect of Objects are not valid as a React child.... You can fix that by changing your render function to return a simple string rather than the whole object. I'll suggest you start with the title and move from there. Try this and you should be on your way:

 render() {
      return (
        <View style={styles.container}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => <Text>{rowData.title}</Text>}
          />
        </View>
      );
  }

Answer 2

This problem could 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.