在React Native中通过SDK显示Parse.com数据

Question

我刚刚开始使用React Native，我确信我错过了一些小东西。但是，对于我的生活，我无法弄清楚如何在任何地方显示this.data.mission.XX。我可以控制台登录数据并在Xcode中看到它，但就是这样。

var React = require('react-native'); 
var Parse = require('parse/react-native'); 
var ParseReact = require('parse-react/react-native'); 

var { 
    Component, 
    StyleSheet, 
    Image, 
    Text, 
    View, 
    StatusBarIOS, 
} = React; 

var CountdownClock = require('./CountdownClock'); 

var CountdownScreen = React.createClass({ 
    mixins: [ParseReact.Mixin], 

    getInitialState: function() { 
    return{ 
     mission: null, 
    }; 
    }, 

    componentDidMount: function() { 
    StatusBarIOS.setStyle('light-content'); 
    }, 

    observe: function() { 
    return { 
     mission: (new Parse.Query('mission')).equalTo('featuredMission', true) 
    }; 
    }, 

    render: function() { 
    console.log(this.data.mission); 
     return (
     <Image source={{uri: '#'}} style={styles.backgroundImage}> 
      <View style={styles.mainContainer}> 
      <View style={styles.clock}> 
       <CountdownClock /> 
      </View> 
      <View style={styles.featured}> 
       <Text style={styles.header}> Name: {this.data.mission.missionName} </Text> 
       <Text style={styles.header}> Estimated Start: {this.data.mission.windowStart}</Text> 
       <Text style={styles.header}> Site: {this.data.mission.missionSite}</Text> 
       <Text style={styles.header}> Vehicle: {this.data.mission.missionVehicle}</Text> 
       <Text style={styles.description}>{this.data.mission.missionDescription}</Text> 
      </View> 
      </View> 
     </Image> 
    ); 
    } 
}); 

Answer 1

考虑到this.data被注销，你可能需要做这样的事情：

设置的状态数据属性：

getInitialState(){ 
    data: {} 
} 

连接this.data到状态：

componentWillUpdate() { 
    this.setState({ 
    data: this.data 
    }) 
} 

使用this.state.data VS this.data

<View style={styles.featured}> 
    <Text style={styles.header}> Name: {this.state.data.mission.missionName} </Text> 
    <Text style={styles.header}> Estimated Start: {this.state.data.mission.windowStart}</Text> 
    <Text style={styles.header}> Site: {this.state.data.mission.missionSite}</Text> 
    <Text style={styles.header}> Vehicle: {this.state.data.mission.missionVehicle}</Text> 
    <Text style={styles.description}>{this.state.data.mission.missionDescription}</Text> 
</View>