undefined 不是对象(评估 'this.state.dataSource')

Question

在Android模拟器上运行，但不确定的不是对象（评估'thia.state.datasource'）请帮助我，这是怎么了？您能帮我不确定的不是一个对象（评估thia.state.datasource'）不确定的不是一个对象（评估'thia.state.datasource'）不确定的不是对象（评估'thia.state.state.datasource'）不是一个对象（评估'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);

Answer 1

嗨，我复制并运行了您的代码和固定错误。这是没有错误的代码：

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

有2个错误。

1。）在COMONTONTDIDMOUNT中，您将功能分配给xmlhttp.onreadystatechange属性，在该功能内部，您使用的是this关键字。但是，由于this没有绑定到适当的上下文，因此您在此行上出现了未定义的错误：

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

将this绑定到我在代码中看到的箭头函数的功能。有关更多说明，请参阅此信息。

2。）您忘记了return renderRow功能中的关键字。