未定义不是一个对象（评估'this.state.dataSource'）

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.）您在renderRow函数中忘记了return关键字。