如何在 Javascript 或 React Native 中形成 uri 字符串? [英] How to form a uri string in Javascript or in React Native?

问题描述

当我在 uri 中硬编码用户名和密码时它工作正常，webview 打开所需的页面并让用户登录，但是当我尝试将变量附加到 uri 时它不起作用，它在登录时出现错误，凭据错误.

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.

硬编码并且工作正常:

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

使用的变量不起作用:

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

推荐答案

我对代码进行了这些更改，并且奏效了

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

这篇关于如何在 Javascript 或 React Native 中形成 uri 字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！