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

Question

當我硬編碼在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}} 
     /> 
    ); 
    } 

Answer 1

我做的這些代碼的變化和它的工作

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

Answer 2

您已經定義getUsername爲async getUsername() { ... }。這意味着將需要await結果，例如， var usr = await this.getUsername();。 getPassword也是如此。

不幸的是我不認爲render函數可能是async，所以你可能不得不重新考慮你的方法。我的建議是讓你的組件滿足缺失值（你可以返回null不渲染任何東西），直到數據可用。

This question正在使用ajax，但異步行爲類似於您的問題，所以也許它可以幫助你。

Answer 3

你可能需要設置用戶名狀態和使用後的回調

因此，像

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