Reakcja natywna i parsowanie, currentuser ma wartość null po zalogowaniu i cmd + R

Question

Mam problem z React Native i Parsowanie JS SDK.
i używam ParseReact

zbudowałem login, zaloguj się i główny widok, zarejestruj się i zaloguj się prace dobrze, ale po tym, jak zalogowany -> skierowany do głównego widoku i kiedy odświeżyć aplikację (CMD + R) w moim symulatorze, przywraca mnie ponownie do widoku logowania, powinienem zostać przeniesiony do widoku głównego.

Jak widać mam ustawić stan na initialComponent:

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

Pozwala to mój nawigator aby sprawdzić CurrentUser jest zerowa następnie załadować LoginView jako początkową składnika, jeszcze ustawić Widok główny (użytkownik zalogowany)

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

W mojej konsoli Xcode, ciągle otrzymywałem bieżącego użytkownika o wartości zerowej po każdym odświeżeniu, mimo że wcześniej się zalogowałem. W mojej aplikacji parsowania mogę zobaczyć, że nowa sesja została utworzona.

W moim 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; 

Czy robię to w niewłaściwy sposób? Miła Rada. A może coś jest nie tak z parse localstorage/session?

Answer 1

Ponieważ React Native obsługuje tylko pamięć asynchroniczną, jesteśmy zmuszeni wykonać asynchroniczne wywołanie, które zwróci Obietnicę. Ponieważ już używasz Parse+React, bardzo łatwo jest sobie z tym poradzić. Twój komponent, który zmienia się w zależności od tego, czy użytkownik jest zalogowany, czy nie (MyApp), powinien subskrybować numer ParseReact.currentUser. To pozostaje zsynchronizowane z bieżącym użytkownikiem i umożliwia automatyczną aktualizację komponentu w momencie zalogowania lub wylogowania użytkownika. Na demo to, spojrzeć na AnyBudgetdemo w repo GitHub:

Answer 2

najpierw w moim przypadku używam ParseReact.Mutation że działa idealnie. Po tym otrzymałem wymóg, że pewne pole musi być unikatowe, więc używam Parse.Cloud do rozwiązania problemu.

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

@ Rozwiązanie Andrew (sam) nie działa dla mnie. Na wypadek, gdyby ktoś inny utknął, oto co się działo: subskrypcja Parse.User.current() nie działa, a this.data.user zawsze ma wartość zerową.

Aby rozwiązać ten problem, musiałem zmienić:

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

do

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

potem wszystko zaczęło pracować estetycznie. Był ładowany do wersji browser modułów analizowania, dopóki nie zmusiłem go do załadowania wersji react-native.

Answer 4

W reagować-rodzimy ...

import Parse from 'parse/react-native'; 

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