React-natywny nie może uzyskać dostępu do danych Parse

Question

Próbuję użyć Parse jako dostawcy danych dla ListView w aplikacji Reactive Native. Śledziłem przewodnik Parse dotyczący subskrybowania zapytania, ale z nieznanego powodu źródło danych jest puste. Sprawdziłem i napisałem obiekt testowy do Parse działa dobrze.

Wygląda na to, że funkcja observe() powinna zostać wywołana przed getInitialState() lub czy czegoś brakuje?

'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

nie używałem ParseReact ale Parse Rest API do pobierania danych z przetworzenia. Poniższy kod jest wywoływany z elementu 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(); 

Stosując to podejście, należy poczekać na załadowanie danych przed wyświetleniem ListView. Użyj this.state.loaded, aby wiedzieć, kiedy tak się dzieje.

Answer 2

To też działa.

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

Mam nadzieję, że pomoże! Twoje zdrowie!