reagisce nativo e analizza, currentuser è nullo dopo l'accesso e cmd + R

Question

Sto riscontrando un problema con React Native e Parse JS SDK.
e sto usando ParseReact

ho costruito un account di accesso, registrarsi e una vista principale Iscriviti e accedere funziona bene, ma dopo che ho collegato -> indirizzato alla vista principale e quando aggiornare l'applicazione (CMD + R) nel mio simulatore, mi riporta nuovamente alla vista di login, dovrei essere portato alla vista principale.

Come potete vedere ho impostato uno stato per initialComponent:

this.state = {   
     InitialComponent : ((!currentUser) ? LoginView : MainView) 
}; 

In questo modo il mio navigatore per verificare la presenza di currentUser è nullo quindi caricare LoginView come componente iniziale, altrimenti impostare Main View (utente connesso)

'use strict'; 
var React = require('react-native'); 
var MainView = require('./MainView'); 
var LoginView = require('./LoginView'); 


var Parse = require('parse').Parse; 
var ParseReact = require('parse-react'); 
Parse.initialize("mykey", "mykey"); 


var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TextInput, 
    TouchableHighlight, 
    Navigator, 
    Component 
} = React; 


class MyApp extends Component { 
    constructor(props) { 
     super(props); 

     var currentUser = Parse.User.current(); 
     console.log('Current User:' + currentUser); 

     this.state = {   
     InitialComponent : ((!currentUser) ? LoginView : MainView) 
     }; 
    } 

    render() { 
     return (
      <Navigator 
       initialRoute={{ 
       name : 'StatusList', 
       component: this.state.InitialComponent 
       }} 
       configureScene = {() =>{ 
       return Navigator.SceneConfigs.FloatFromRight; 
       }} 
       renderScene={(route, navigator) =>{ 
       if(route.component) { 
        return React.createElement(route.component, {navigator}); 
       } 
       }}/> 

     ); 
    } 
} 

AppRegistry.registerComponent('MyApp', function() { return MyApp }); 

Nella mia console Xcode, ho mantenuto l'utente corrente è nullo dopo ogni aggiornamento, anche se ho già effettuato l'accesso. Sulla mia app parse, posso vedere la nuova sessione è stata creata.

Nel mio LoginView.

'use strict'; 

var React = require('react-native'); 
var SignUp = require('./SignUp'); 
var MainView = require('./MainView'); 

var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TextInput, 
    TouchableHighlight, 
    Navigator, 
    AlertIOS, 
    Component 
} = React; 

var styles = StyleSheet.create({ 
    container : { 
     flex: 1, 
     padding: 15, 
     marginTop: 30, 
     backgroundColor: '#0179D5', 
    }, 
    text: { 
    color: '#000000', 
    fontSize: 30, 
    margin: 100 
    }, 

    headingText: { 
    color: '#fff', 
    fontSize: 40, 
    fontWeight: '100', 
    alignSelf: 'center', 
    marginBottom: 20, 
    letterSpacing: 3 
    }, 

    textBox: { 
    color: 'white', 
    backgroundColor: '#4BB0FC', 
    borderRadius: 5, 
    borderColor: 'transparent', 
    padding:10, 
    height:40, 
    borderWidth: 1, 
    marginBottom: 15, 
    }, 

    greenBtn: { 
    height: 36, 
    padding: 10, 
    borderRadius: 5, 
    backgroundColor: '#2EA927', 
    justifyContent: 'center' 
    }, 

    signUpButton: { 
    marginTop: 10, 
    height: 36, 
    padding: 10, 
    borderRadius: 5, 
    backgroundColor: '#FF5500', 
    justifyContent: 'center' 

    }, 

    btnText: { 
    color : '#fff', 
    fontSize: 15, 
    alignSelf: 'center' 
    }, 

    buttonText: { 
    fontSize: 18, 
    color: 'white', 
    alignSelf: 'center' 
    }, 

    loginForm : { 
     flex:1, 
     marginTop:100 
    } 
}); 

class LoginView extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
     username: '', 
     password: '' 
     }; 

    } 

    checkLogin() { 
     var success = true; 
     var state = this.state; 
     for(var key in state){ 
      if(state[key].length <= 0){ 
      success = false; 
      } 
     } 

     if(success) { 
      this._doLogin(); 
     } else { 
      //show alert 
      AlertIOS.alert('Error','Please complete all fields', 
      [{text: 'Okay', onPress:() => console.log('')}] 
     ); 
     } 
    } 

    goMainView() { 
     this.props.navigator.push({ 
     title: "Home", 
     component: MainView 
     }); 
    } 

    goSignUp() { 
     this.props.navigator.push({ 
     title: "Sign Up", 
     component: SignUp 
     }); 
    } 

    _doLogin() { 
     var parent = this; 
     Parse.User.logIn(this.state.username, this.state.password, { 
     success: function(user) { 
      parent.goMainView(); 
     }, 
     error: function(user, error) { 
      AlertIOS.alert('Login Error', error.message, 
      [{text: 'Okay', onPress:() => console.log('')}] 
     ); 
     } 
     }); 
    } 

    onUsernameChanged(event) { 
     this.setState({ username : event.nativeEvent.text }); 
    } 

    onPasswordChanged(event) { 
     this.setState({ password : event.nativeEvent.text }); 
    } 

    render() { 
     return(
      <View style={styles.container}> 
      <View style={styles.loginForm}> 
       <Text style={styles.headingText}> 
        MyStatus 
       </Text> 

       <TextInput style={styles.textBox} 
       placeholder='Username' 
       onChange={this.onUsernameChanged.bind(this)} 
       placeholderTextColor='#fff' 
       autoCorrect={false} 
       > 
       </TextInput> 

       <TextInput style={styles.textBox} 
       placeholder='Password' 
       onChange={this.onPasswordChanged.bind(this)} 
       placeholderTextColor='#fff' 
       password={true} 
       > 
       </TextInput> 

       <TouchableHighlight style={styles.greenBtn} 
        underlayColor='#33B02C' 
        onPress={this.checkLogin.bind(this)}> 
        <Text style={styles.btnText}>Login</Text> 

       </TouchableHighlight> 


       <TouchableHighlight style={styles.signUpButton} 
        underlayColor='#D54700' 
        onPress={this.goSignUp.bind(this)}> 
        <Text style={styles.btnText}>Sign Up</Text> 

       </TouchableHighlight> 
      </View> 

      </View> 
     ); 
    } 
} 

module.exports = LoginView; 

Sto facendo nel modo sbagliato? Consiglio Gentile. O è qualcosa di sbagliato con parse localstorage/session?

Answer 1

Poiché React Native fornisce solo storage asincrono, siamo costretti a effettuare Parse.User.current() una chiamata asincrona che restituisce una Promessa. Dato che stai già utilizzando Parse+React, è davvero facile gestirlo. Il componente che cambia in base al fatto che l'utente abbia effettuato l'accesso o meno (MyApp) deve abbonarsi allo ParseReact.currentUser. Rimane sincronizzato con l'utente corrente e consente al componente di aggiornarsi automaticamente nel momento in cui l'utente esegue il login o l'uscita. Per una demo di questo, guardare il AnyBudgetdemo nel repository GitHub:

Answer 2

In un primo momento, nel mio caso io uso ParseReact.Mutation che funzionano perfettamente. Successivamente ho ricevuto l'esigenza che alcuni campi debbano essere unici, quindi per risolvere il problema utilizzo Parse.Cloud.

// For normally situaltion is work fine. 
ParseReact.Mutation.Set(this.data.myObject, { 
    normal_field: this.state.value 
}).dispatch(); 

// But if I use Parse.Cloud. Is there any solution to sync data to ParseReact.currentUser? 
Parse.Cloud.run('setUniqueField', { 
    userID: this.data.user.id.objectId, 
    uniqueField: this.state.value, 
}, { 
    success: function (response) { 
    // It doesn't work! 
    // ParseReact.currentUser.update(); 
    this.props.navigator.pop(); 
    }.bind(this), 
    error: function (error) { 
    console.log('[Parse Cloud Error]: ', error); 
    } 
}); 

Answer 3

@ La soluzione di Andrew (da sola) non ha funzionato per me. Nel caso in cui qualcun altro è bloccato, ecco cosa stava succedendo: l'iscrizione a Parse.User.current() non funzionava e l'this.data.user era sempre nullo.

Per risolvere questo problema, ho dovuto cambiare:

var Parse = require('parse').Parse; var ParseReact = require('parse-react');

a

var Parse = require('parse/react-native').Parse; var ParseReact = require('parse-react/react-native');

poi tutto ha iniziato a lavorare in modo bello. Stava caricando la versione browser dei moduli di analisi fino a quando non l'ho forzato a caricare le versioni react-native.

Answer 4

In reagisce-native ...

import Parse from 'parse/react-native'; 

Parse.User.currentAsync() 
.then((currentUser)=>{ 
    if (currentUser) { 
     Alert.alert('', JSON.stringify(currentUser)) 
    } 
});