CODEWITHSUNDEEP
react-native
rnboi05
rnboi05

Reputation: 113

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

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

Upvotes: 10

Views: 13114

Answers (3)

Dk Khatri
Dk Khatri

Reputation: 3

According to react Native Documentation Listview Component is Deprecated in React Native. Please use FlatList or SectionList

for more deails prefere:- https://facebook.github.io/react-native/docs/listview.html

Upvotes: 0

El Chapitan
El Chapitan

Reputation: 336

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

Upvotes: 12

agm1984
agm1984

Reputation: 17132

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.

Upvotes: 1

Related Questions