如何在Javascript或React Native中形成uri字符串？

当我在uri中硬编码用户名和密码时，它工作正常，webview打开所需页面并登录用户，但当我尝试向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() {

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

您已将getUsername定义为异步getUsername{…}。这意味着需要等待结果，例如var usr=wait this.getUsername；。getPassword也是如此

不幸的是，我认为渲染函数不能是异步的，所以您可能需要重新考虑一下您的方法。我的建议是，让您的组件满足缺少的值，您可以返回null以在数据可用之前不呈现任何内容

---

正在使用ajax，但异步行为与您的问题类似，因此可能它可以帮助您解决问题。

您可能需要将用户名设置为状态，并在回调后使用该状态

大概是

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

---

我在代码中做了这些更改，它成功了

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

---

不工作是什么意思？它不会记录inDo console.logusr，在让pic={uri:'之前传递http://userlogin.php?username=“+usr+”&密码=“+pass}；console.log'user'+usr，'pass'+pass；'用户[object]，“pass[object object]”由于您正在获取一个对象，这是一个问题，您需要追加一个字符串