How to form a uri string in Javascript or in React Native?

Question

when i Hardcode the username and password in the uri it works fine, the webview opens the required page and logs the user in, but when i try to append variables to the uri it does not work, it gives an error in login , the credentials are wrong.

Hardcoded and works fine:

import React, { Component } from 'react';
import { WebView,AsyncStorage } from 'react-native';

export default class Test extends Component {




async getUsername(){
var username;
try {
username = await AsyncStorage.getItem('username');
console.log('username'+username);
return username;

} catch (error) {
// Error retrieving data
username ="";
console.log('username'+username);
return username;
}

}

async getPassword(){
var password;
try {
password = await AsyncStorage.getItem('password');
console.log('password'+password);
return password;
} catch (error) {
// Error retrieving data
password="";
return password;
}
}
render() {

let pic = {

  uri: 'http://www.userlogin.php?username=react&password=react@123'

   };
return (

  <WebView
    automaticallyAdjustContentInsets={false}
    scalesPageToFit={false}
    source={{uri:pic.uri}}
  />
);

Used Variables does not work:

    import React, { Component } from 'react';
    import { WebView,AsyncStorage } from 'react-native';

    export default class Test extends Component {
    async getUsername(){
    var username;
    try {
    username = await AsyncStorage.getItem('username');
    console.log('username'+username);
    return username;

    } catch (error) {
    // Error retrieving data
    username ="";
    console.log('username'+username);
    return username;
    }

    }

    async getPassword(){
    var password;
    try {
    password = await AsyncStorage.getItem('password');
    console.log('password'+password);
    return password;
    } catch (error) {
    // Error retrieving data
    password="";
    return password;
    }
    }
    render() {
    var usr=this.getUsername();
    var pass=this.getPassword();
    let pic = {

      uri: 'http://userlogin.php?username='+usr+'&password='+pass

       };
    return (

      <WebView
        automaticallyAdjustContentInsets={false}
        scalesPageToFit={false}
        source={{uri:pic.uri}}
      />
    );
  }

Do console.log(usr, pass) before let pic = { uri: 'http://userlogin.php?username='+usr+'&password='+pass }; — Shubham Khatri
– Shubham Khatri, Commented Apr 7, 2017 at 9:59
console.log('user'+usr,'pass'+ pass); 'user[object Object]', 'pass[object Object]' — Siddarth G
– Siddarth G, Commented Apr 7, 2017 at 10:44
Since you are getting an object, it is a problem , you need a string to append — Shubham Khatri
– Shubham Khatri, Commented Apr 7, 2017 at 10:57

Community · Accepted Answer · 2017-05-23 11:46:34Z

1

You have defined getUsername as async getUsername() { ... }. which means would will need to await the result, e.g. var usr = await this.getUsername();. The same is true for getPassword.

Unfortunately I don't think the render function can be async so you might have to rethink your approach a bit. My advice would be to make your component cater for the missing values (you can return null to not render anything) until the data is available.

This question is using ajax, but the asynchronous behaviour is similar to your problem, so maybe it can help you out.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Apr 7, 2017 at 13:18

Michael Peyper

6,9642 gold badges31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

coder hacker · Accepted Answer · 2017-04-07 15:10:56Z

You probably need to set username in state and use that after callback

So something like

    import React, { Component } from 'react';
    import { WebView,AsyncStorage } from 'react-native';

    export default class Test extends Component {

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

    }
    async getUsername(){
    var username;
    try {
    username = await AsyncStorage.getItem('username');
    console.log('username'+username);
    this.setState({username: username});

    } catch (error) {
    // Error retrieving data
    username ="";
    console.log('username'+username);
    }

    }

    async getPassword(){
    var password;
    try {
    password = await AsyncStorage.getItem('password');
    console.log('password'+password);
    this.setState({password: password});
    } catch (error) {
    // Error retrieving data
    password="";
    return password;
    }
    }

    getWebView() {
        var usr = this.state.username;
        var pass = this.state.password;
        if (usr != null && pass != null) {
             uri: 'http://userlogin.php?username='+usr+'&password='+pass;
             return(
             <WebView
              automaticallyAdjustContentInsets={false}
              scalesPageToFit={false}
              source={{uri:pic.uri}}
              />
              );

        } else {
           return( <View></View>);
        }

    }
    componentWillMount() {

       this.getUsername();
       this.getPassword();
    }
    render() {

    return (

      <View>
        {this.getWebView()}
      </View>
    );
  }

Siddarth G · Accepted Answer · 2017-04-10 10:07:40Z

I did these changes in the code and it worked

import React, { Component } from 'react';
import { WebView,AsyncStorage } from 'react-native';

export default class Test extends Component {
state = {
username:'',
password:'',
};
componentDidMount() {
this._loadInitialState().done();
}

_loadInitialState = async () => {
try {
  var value = await AsyncStorage.getItem('username');
  if (value !== null){
    this.setState({username: value});

  } else {
    this.setState({username:''});
  }
} catch (error) {
    this.setState({username:'AsyncStorage error: ' + error.message});

}
try {
  var value = await AsyncStorage.getItem('password');
  if (value !== null){
    this.setState({password: value});

  } else {
    this.setState({password:''});
  }
} catch (error) {
    this.setState({password:'AsyncStorage error: ' + error.message});

}
};

render() {
let pic = {

  uri: 'http://appsriv.com.bh-in-19.webhostbox.net/wp/user-login.php?username='+this.state.username+'&password='+this.state.password

   };
return (

  <WebView
    automaticallyAdjustContentInsets={false}
    scalesPageToFit={false}
    source={{uri:pic.uri}}
  />
);
}
}

Collectives™ on Stack Overflow

How to form a uri string in Javascript or in React Native?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related