React Native evaluating 'dataSource.rowIdentities

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();
  }
}