我正在尝试使用Parse作为Reactive Native应用程序中ListView的数据提供程序.我已经按照Parse指南关于订阅查询,但由于某些未知原因,数据源为空.我已经验证并编写了一个测试对象,Parse工作得很好.
似乎应该在getinitialState()之前调用observe()或者我错过了什么？
'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;
解决方法
我没有使用ParseReact,而是使用Parse Rest API从Parse获取数据.从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();
使用此方法,您需要等到数据加载后再显示ListView.使用this.state.loaded来了解何时是这种情况.