Question

在android模拟器上运行但未定义不是对象（评估'thia.state.dataSource'）请帮助我，有什么问题？你能帮我吗undefined不是一个对象（评估'thia.state.dataSource'）undefined不是一个对象（评估'thia.state.dataSource'）undefined不是一个对象（评估'thia.state.dataSource'）undefined不是对象（评估'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。）在componentDidMount中，您为xmlhttp.onreadystatechange属性分配了一个函数，并且在该函数内部使用了this关键字。但是由于this没有绑定到正确的上下文，所以你在这一行得到了未定义的错误：

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

要将this绑定到我使用箭头函数的函数，您可以在代码中看到。有关详细说明see this。

2。）您在return函数内忘记了renderRow个关键字。

undefined不是对象（评估'this.state.dataSource'）

1 个答案: