如何让 webview 等待令牌？答案

【问题标题】：how to make a webview wait for token?如何让 webview 等待令牌？
【发布时间】：2020-06-29 19:03:45
【问题描述】：

我对 React Native webview 有疑问，我想我知道这个问题。在使用令牌填充令牌值之前，webview 正在运行？如何让 webview 在渲染前等待令牌？

我知道这是原因，如果我运行 auth api 并获取令牌并将其粘贴到“令牌”所在的位置，则 Web 视图会正确呈现。

代码：

const getSetData = async() =>{
        await AsyncStorage.getItem('token').then((result) => {
            token = result;
        });
    }


    return (
        <View styles={styles.container}>
            <NavigationEvents
                    onDidFocus = {()=> {
                        getSetData();
                    }}
            />
            
            <View style={{alignItems:'center', marginTop: 60}}>
                <SLSHeader style={{height: 65, width: '100%'}} navigation={props.navigation} title="RAPID RATES"/>
                <View style={{padding:10, top: 20, marginTop:40, marginBottom:10, width:'95%', height:'90%'}}>
                    <WebView
                        source={{uri: 'http://myurl.com', headers:{"Authorization":token} }}
                        style={{ width: '100%', height: '100%'}}
                    />
                </View>
            </View>
        </View>
    );

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

您应该将令牌存储在 useState 中。

const [token, setToken] = useState('');

const getSetData = async() =>{
        await AsyncStorage.getItem('token').then((result) => {
            setToken(result);
        });
    }

...

{token && <WebView
            source={{uri: 'http://myurl.com', headers:{"Authorization":token} }}
            style={{ width: '100%', height: '100%'}}
          />}

当设置令牌时，组件将重新渲染，webview 将加载正确的令牌。

【讨论】：

疯狂的是，我是通过 useState 做到的，然后令牌返回空白？？？

【解决方案2】：

疯狂的是，我试过这个，令牌控制台是空白的。

export default function GetHelp (props) {
    let [token, setToken] = useState("");

    const getSetData = async() =>{
        await AsyncStorage.getItem('token').then((result) => {
            setToken(token);
            //token = result;
        });
    }


    return (
        <View styles={styles.container}>
            <NavigationEvents
                    onDidFocus = {()=> {
                        getSetData();
                        console.log("Set Token: ", token);
                    }}
            />

            <View style={{alignItems:'center', marginTop: 60}}>
                <SLSHeader style={{height: 65, width: '100%'}} navigation={props.navigation} title="RAPID RATES"/>
                <View style={{padding:10, top: 20, marginTop:40, marginBottom:10, width:'95%', height:'90%'}}>
                    <WebView
                        source={{uri: 'http://myurl.com', headers:{"Authorization":token} }}
                        style={{ width: '100%', height: '100%'}}
                    />
                </View>
            </View>
        </View>
    );  
}

控制台日志打印空白？？？

【讨论】：

setToken(token);应该是 setToken(result);虽然结果相同。即使我控制台结果，令牌也是空白的，它显示令牌？？？