2015-05-23 12 views
6

मैं एक प्रतिक्रियाशील घरेलू एप्लिकेशन में एक ListView के लिए डेटा प्रदाता के रूप में Parse उपयोग करने के लिए कोशिश कर रहा हूँ उपयोग नहीं कर सकते। मैंने एक क्वेरी की सदस्यता लेने के संबंध में पार्स गाइड का पालन किया है लेकिन कुछ अज्ञात कारणों से डेटा स्रोत खाली है। मैंने पार्स काम करने के लिए टेस्ट ऑब्जेक्ट को सत्यापित और लिखना ठीक किया है।प्रतिक्रिया देशी पार्स डेटा

ऐसा लगता है कि getInitialState() से पहले निरीक्षण() को कॉल किया जाना चाहिए या क्या मुझे कुछ याद आ रहा है?

'use strict'; 
var React = require('react-native'); 
var Strings = require('./LocalizedStrings'); 
var Parse = require('parse').Parse; 
var ParseReact = require('parse-react'); 

Parse.initialize("api_key_here", "api_key_here"); 

/* 
var TestObject = Parse.Object.extend("TestObject"); 
var testObject = new TestObject(); 
testObject.save({foo: "bar"}).then(function(object) { 
    alert("yay! it worked"); 
}); 
*/ 

var { 
    View, 
    Text, 
    ListView, 
    StyleSheet 
} = React; 

var styles = StyleSheet.create({ 
    mainContainer: { 
    flex: 1, 
    padding: 30, 
    marginTop: 65, 
    flexDirection: 'column', 
    justifyContent: 'center', 
    backgroundColor: '#fff' 
    }, 
    title: { 
    marginBottom: 20, 
    fontSize: 22, 
    textAlign: 'center', 
    color: '#000' 
    }, 
}); 

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) // assumes immutable objects 

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

    observe: function() { 
    return { 
     workouts: (new Parse.Query("Workout")).descending("createdAt") 
    }; 
    }, 

    getInitialState: function() { 
    return {dataSource: ds.cloneWithRows(this.data.workouts)} 
    }, 

    renderRow: function() { 
    return (<View><Text>Testing</Text></View>) 
    }, 

    render: function() { 
    return (
     <View style = {{flex: 1, flexDirection: 'column'}}> 
      {Strings.workoutsTabTitle} 
      <ListView 
      ref = "listview" 
      dataSource = {this.state.dataSource} 
      renderRow = {this.renderRow} 
      automaticallyAdjustContentInsets = {false} 
      keyboardDismissMode = "onDrag" 
      keyboardShouldPersistTaps = {true} 
      showsVerticalScrollIndicator = {true} 
      style = {styles.mainContainer} 
      /> 
     </View> 
    ) 
    } 
}) 

module.exports = WorkoutList; 

enter image description here

उत्तर

7

मैं पार्स से डेटा प्राप्त करने ParseReact लेकिन पार्स बाकी एपीआई का उपयोग नहीं किया। निम्नलिखित कोड घटकडिडमाउंट से कहा जाता है।

fetch("https://api.parse.com/1/classes/Workout", { 
    headers: { 
    "X-Parse-Application-Id": "Your application Id", 
    "X-Parse-REST-API-Key": "Your API Key" 
    } 
}) 
    .then((response) => response.json()) 
    .then((responseData) => { 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(responseData.results), 
     loaded: true, 
    }) 
    }) 
    .catch(function(error) { 
    console.log(error) 
    }) 
.done(); 

इस दृष्टिकोण का उपयोग करके आपको सूची दृश्य को प्रदर्शित करने से पहले डेटा लोड होने तक प्रतीक्षा करने की आवश्यकता है। यह मामला कब पता है यह जानने के लिए this.state.loaded का उपयोग करें।

+0

तुम क्यों पार्स प्रतिक्रिया अगर तुम मुझे कोई आपत्ति नहीं है पूछ का उपयोग नहीं किया? – Nikos

4

यह भी काम करता है।

observe: function() { 
    return { 
    user: ParseReact.currentUser, 
    abc: (new Parse.Query('abc')).descending('createdAt') 
    }; 
}, 

getInitialState: function() { 
    return { 
    dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}), 
    }; 
}, 

render: function() { 
    return (
    <View style={styles.full}> 
     <ListView 
     dataSource={this.state.dataSource.cloneWithRows(this.data.abc)} 
     renderRow={this.renderRow} 
     /> 
    </View> 
); 
}, 

उम्मीद है कि यह मदद करता है! चीयर्स!

संबंधित मुद्दे