Phản ứng gốc không thể truy cập dữ liệu Phân tích cú pháp

Question

Tôi đang cố gắng sử dụng Parse làm nhà cung cấp dữ liệu cho một ListView trong ứng dụng Gốc phản ứng. Tôi đã làm theo hướng dẫn Parse về việc đăng ký truy vấn nhưng vì một lý do không rõ nguồn dữ liệu trống. Tôi đã xác minh và viết một đối tượng thử nghiệm để Parse hoạt động tốt.

Có vẻ như quan sát() nên được gọi trước getInitialState() hoặc tôi có thiếu gì đó không?

'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

Tôi không sử dụng ParseReact nhưng Parse Rest API để lấy dữ liệu từ Parse. Đoạn mã sau được gọi từ 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(); 

Sử dụng phương pháp này bạn cần đợi cho đến khi dữ liệu được tải trước khi hiển thị ListView. Sử dụng this.state.loaded để biết khi nào trường hợp này xảy ra.

Answer 2

Điều này cũng hoạt động.

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

Hy vọng điều đó sẽ hữu ích! Chúc mừng!