undefined is not an object (evaluating 'this.state.dataSource')

Question

run on android emulator but undefined is not an object (evaluating 'thia.state.dataSource') pls help me, what is wrong ? could you help me undefined is not an object (evaluating 'thia.state.dataSource') undefined is not an object (evaluating 'thia.state.dataSource') undefined is not an object (evaluating 'thia.state.dataSource') undefined is not an object (evaluating 'thia.state.dataSource')

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

export default class deneme1 extends Component {
    constructor() {
        super();

        var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.state = {
            dataSource: ds.cloneWithRows([])
        };
    }


    componentDidMount() {

        var tit = [];
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {

            if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
                var response = JSON.parse(xmlhttp.responseText);

                for (var i = 0; i < response.movies.length; i++) {
                    tit.push(response.movies[i].title);
                }
                Alert.alert(tit.toString());
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(tit)
                })
            }
        };

        xmlhttp.open("GET", 'https://facebook.github.io/react-native/movies.json', true);
        xmlhttp.send();
    }


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

    renderRow(dataRow) {
        <TouchableHighlight>
            <View>
                <Text>
                    {dataRow}
                </Text>
            </View>
        </TouchableHighlight>
    }

}

const styles = StyleSheet.create({
    on: {
        width: 100,
        height: 100,
        backgroundColor: 'yellow',
    },
    off: {
        width: 100,
        height: 100,
        backgroundColor: 'black',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

AppRegistry.registerComponent('deneme1', () => deneme1);

actually , doesnt set data source like this, this.setState ({ dataSource: this.state.dataSource.cloneWithRows(['row 1', 'row 2']) }) constructor() { super(); var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([]) }; } — Muhammet Sancaktutan, Feb 28 '17 at 11:44

score 1 · Accepted Answer · edited May 23 '17 at 12:16

Hi I copied and ran your code and fixed errors you had. This is the code without errors:

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

export default class deneme1 extends Component {
     constructor() {
         super();

         var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
         this.state = {
             dataSource: ds.cloneWithRows([])
         };
     }


     componentDidMount() {
         var tit = [];
         var xmlhttp = new XMLHttpRequest();
         xmlhttp.onreadystatechange = () => {

             if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
                 var response = JSON.parse(xmlhttp.responseText);

                 for (var i = 0; i < response.movies.length; i++) {
                     tit.push(response.movies[i].title);
                 }
                 Alert.alert(tit.toString());
                 this.setState({
                     dataSource: this.state.dataSource.cloneWithRows(tit)
                 })
             }
         }

         xmlhttp.open("GET", 'https://facebook.github.io/react-native/movies.json', true);
         xmlhttp.send();
     }


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

     renderRow(dataRow) {
         return <TouchableHighlight>
             <View>
                 <Text>
                     {dataRow}
                 </Text>
             </View>
         </TouchableHighlight>
     }

}

const styles = StyleSheet.create({
     on: {
         width: 100,
         height: 100,
         backgroundColor: 'yellow',
     },
     off: {
         width: 100,
         height: 100,
         backgroundColor: 'black',
     },
     container: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: '#F5FCFF',
     },
     welcome: {
         fontSize: 20,
         textAlign: 'center',
         margin: 10,
     },
     instructions: {
         textAlign: 'center',
         color: '#333333',
         marginBottom: 5,
     },
 });

AppRegistry.registerComponent('deneme1', () => deneme1);

There were 2 errors.

1.) In the componentDidMount you assigned a function to the xmlhttp.onreadystatechange property, and inside that function you are using this keyword. But since this was not bound to the proper context, you got your undefined error on this line:

this.setState({
    dataSource: this.state.dataSource.cloneWithRows(tit)
})

To bind the this to the function I used arrow function as you can see in the code. For more explanation see this.

2.) You forgot return keyword inside renderRow function.

undefined is not an object (evaluating 'this.state.dataSource')

1 Answers1