APP.JS

Question

我很新来响应本地开发。我正在尝试处理一些基本身份验证。主页（App.js）首先检查它是否可以在我的情况下找到 access_token 的任何Asyncstorage参数。如果找不到任何内容，它将重定向到登录页面，否则会将您带到仪表板。

我的问题是用户单击 LOGIN.JS 中的登录名（发送到服务器的数据并接收到令牌）之后，令牌被保存在Asyncstorage密钥中，在此之后您应返回到（App.js），但不是。

注意：我未提供完整的渲染代码，例如：TextInput

APP.JS

import Login from './src/compoments/login/Login'
import Dashboard from './src/compoments/dashboard/Dashboard'
export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isTokenValid: false,
      access_token: '',

    }
  }


  render() {
    console.disableYellowBox = true;



    this.loadToken();
    const isLoggedIn = this.state.isTokenValid;
    console.log("Logged IN : ", isLoggedIn);

    if (isLoggedIn) 
      return <Dashboard     />;
    else 
      return <Login 
          onLoginPress={() => this.setState({isLoggedIn: true})}
        />;




  }

  loadToken(){

    retrieveData = async () => {
      try {
        const value = await AsyncStorage.getItem('access_token');
        console.log("TOKEN", value);
        if (value !== null) {
          this.setState({access_token : value});
          this.setState({isTokenValid : true});
          console.log(value);
        }else{

          this.setState({isTokenValid : false});

        }
      } catch (error) {
        console.log("ERROR : ", error)
      }
    }
  }

}

LOGIN.JS

export default class Login extends React.Component {
    constructor(props){
        super(props);
        this.state = {
          username: '',
          password: '',
          param3: '',
          serverResponse:'',
          isLoggingIn: false,
          isLoggedIn: false
        }
      }

 render() {
return (



  <View style={styles.container}>


                    <TouchableOpacity style={styles.buttonContainer} 
                                        onPress={this.getLoginApi.bind(this)}>
                                <Text  style={styles.buttonText}>LOGIN</Text>


                    </TouchableOpacity> 


            {this.state.isLoggingIn && <ActivityIndicator size="large" color="#0000ff" />}


  </View>



);


getLoginApi(){

  this.setState({ isLoggingIn: true, message: '' });


    var formData = new FormData();
    formData.append('param1', this.state.username);
    formData.append('param2', this.state.password);
    formData.append('param3', this.state.param3); 

    var request = new XMLHttpRequest();
    request.onreadystatechange = (e) => {
      if (request.readyState !== 4) {
        return;
      }

      if (request.status === 200) {

        this.setState({ isLoggingIn: false })
        const status = this.getJSONValue(request.responseText,"status");
        console.log('SERVER RESPONSE : ',  status);
        if(status=="success"){

            const token = this.getJSONValue(request.responseText,"token");
            console.log("ACCESS TOKEN : ", token);
            AsyncStorage.setItem('access_token', token);
            this.setState({isLoggedIn: true});
            this.props.onLoginPress();   
        }



      } else {
        this.setState({ isLoggingIn: false })
        console.warn('error');
      }
    };

    request.open('POST', 'https://bla.com/test.php');
    request.send(formData);


}



 getJSONValue(jsonObj, findKey){

   let response = '';

    JSON.parse(jsonObj, (key, value) => {

        if(key==findKey){

           response = value;

        }

      });  
      return response;
}

}

Answer 1

由于在渲染App.js中使用代码isTokenValid来检查要渲染的组件，所以代码无法工作的原因。

 const isLoggedIn = this.state.isTokenValid;

但是当您将道具发送到Login.js

<Login 
  onLoginPress={() => this.setState({isLoggedIn: true})}
/>

您将道具发送到onLoginPress，但是将状态isLoggedIn设置为true。因此，它会创建一个名为isLoggedIn的新状态。它不会将const的值更改为true，因为state和const不同。

只需对此进行更改，它就可以工作

<Login 
      onLoginPress={() => this.setState({isTokenValid: true})}
    />

React Native返回按钮单击

APP.JS

LOGIN.JS

1 个答案: