React-native cannot access Parse data

Question

I am trying to use Parse as a data provider for ListView in a Reactive Native application. I followed Parse's guidance on subscribing to a request, but for some unknown reason, the data source is empty. I checked and wrote a test object to make Parse work fine.

It seems that watch () should be called before getInitialState () or am I missing something?

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

Answer 1

I did not use ParseReact, but the Parse Rest API to retrieve data from Parse. The following code is called from componentDidMount.

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

Using this approach, you need to wait for the data to load before displaying the ListView. Use this.state.loaded to know when this is.

Answer 2

This also works.

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

Hope this helps! Hooray!