ios - linking - react-native-gifted-chat

React-native no puede acceder a los datos de Parse

Question

Parse usar Parse como el proveedor de datos para un ListView en una aplicación Reactive Native. He seguido la guía de Parse con respecto a la suscripción a una consulta, pero por algún motivo desconocido, la fuente de datos está vacía. He verificado y escrito un objeto de prueba para que Parse funcione bien.

Parece que se debe llamar a observe () antes de getInitialState () o me falta algo?

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

Esto también funciona

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

¡Espero eso ayude! ¡Aclamaciones!

Answer 2

No usé ParseReact, sino la API Parse Rest para obtener datos de Parse. El siguiente código se llama desde 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();

Con este enfoque, debe esperar hasta que se carguen los datos antes de mostrar ListView. Use this.state.loaded para saber cuándo es este el caso.