Await内部的代码未在Expo应用程序中运行

Question

我有一个expo-react应用程序的以下代码，除了我最近添加的其他代码-"isLoggedIn"控件外，该应用程序的运行情况与预期一致。我添加了一条注释，即fuirstconsole.log是输出的，但"等待"中的部分似乎从未运行过。为什么会这样？我对代码的意图是检查securestorage中是否存在令牌，如果存在，它是否有效。如果是，请导航到"ListsView"。它在模拟器上运行，但如上所述，不在等待中运行代码。

import React, { Component, useState } from 'react';
import * as Font from 'expo-font';
import { StyleSheet, Text, View , Button, TextInput, Alert} from 'react-native';
import { AppLoading } from 'expo';
import { Formik } from 'formik';
import { globalStyles } from '../styles/global';
import * as SecureStore from 'expo-secure-store';
const getFonts = () => Font.loadAsync({
'lobster': require('../assets/fonts/Lobster-Regular.ttf'),
'nunito': require('../assets/fonts/Nunito-Regular.ttf')
});

export default function LogInForm({ navigation }) {
const [fontsLoaded ,setFontsLoaded] = useState(false);
const goToLists  = () => {
navigation.navigate('ListsView');
}

const isLoggedIn = () => {
console.log("-------------");     **NOTE THIS IS TRIGGERED**
(async () => {
console.log("xxxxxxxxxx");     **THIS IS NEVER TRIGGERED**
const token = await SecureStore.getItemAsync('token');
// Your fetch code
this.setState({loaded:false, error: null});
let url = 'https://www.myWebsite.com/api/auth/isLoggedIn';
let h = new Headers();
h.append('Authorization', `Bearer ${token}`);
h.append('Content-Type', 'application/json');
h.append('X-Requested-With', 'XMLHttpRequest');    
let req = new Request(url, {
headers: h,
method: 'GET'
});
fetch(req)
.then(response=>response.json())
.then(this.setState({token: isSet}));
console.log(token);
console.log("**************");
})
}





if(fontsLoaded){
isLoggedIn();  
return(
<View style={globalStyles.container}>    
<View style={globalStyles.centering}>
<Text style={globalStyles.titleText}>OurShoppingList</Text>
<View style={globalStyles.logInScreen}>
<Text style={globalStyles.headingText}>Log In</Text>
<View>
<Formik
initialValues={{ email: '', password: ''}}
onSubmit={(values) => {
SecureStore.deleteItemAsync('token');

fetch('https://www.myWebsite.com/api/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
},
body: JSON.stringify({
email: values.email,
password: values.password,
}),
})
.then(response => response.json())
.then(responseJson => {
console.log(responseJson)
if(responseJson.access_token){
const setToken = async (token) => {
await SecureStore.setItemAsync('token', responseJson.access_token);
};
setToken ();

navigation.navigate('ListsView');
} else {
Alert.alert(responseJson.message);
}

})
.catch(error => {
console.error(error);
alert(error.message);
});
if(SecureStore.getItemAsync('token')!='') {
goToLists;
}
}}
>
{(props) => (
<View>
<Text style={globalStyles.labelText}>Email Address:</Text>

<TextInput
autoCompleteType="username"
style={globalStyles.textInput}

onChangeText={props.handleChange('email')}
value={props.values.email}
/>

<Text style={globalStyles.labelText}>Password:</Text>
<TextInput secureTextEntry={true}
style={globalStyles.textInput}
onChangeText={props.handleChange('password')}
value={props.values.password}
/>
<View style={globalStyles.buttons}>
<Button title='submit' color='orange' onPress={props.handleSubmit} />
</View>
</View>
)}        
</Formik>

</View>
</View>
</View>
<View style={globalStyles.login}>
</View>           
</View>
)
} else {
return (
<AppLoading
startAsync={getFonts}
onFinish={() => setFontsLoaded(true)}
/>
);
}
}

Answer 1

以(async () => {开头、以})结尾的代码块只创建了一个函数，但未能实际运行。将()附加到它将运行该函数。

所以把它改成这样：

(async () => {
console.log("xxxxxxxxxx");
...
...
})()

请注意末尾的()，它将触发函数调用。

Answer 2

您所指向的代码是一个函数块，在调用它之前永远不会执行

const isLoggedIn = () => {
console.log('-------------');
(async () => {
console.log('xxxxxxxxxx');
const token = await SecureStore.getItemAsync('token');
// Your fetch code
this.setState({ loaded: false, error: null });
const url = 'https://www.myWebsite.com/api/auth/isLoggedIn';
const h = new Headers();
h.append('Authorization', `Bearer ${token}`);
h.append('Content-Type', 'application/json');
h.append('X-Requested-With', 'XMLHttpRequest');
const req = new Request(url, {
headers: h,
method: 'GET',
});
fetch(req)
.then(response => response.json())
.then(this.setState({ token: isSet }));
console.log(token);
console.log('**************');
})(); // <<== those () will exec the code inside the fn-block
};

或

const isLoggedIn = async () => {
console.log('-------------');
console.log('xxxxxxxxxx');
const token = await SecureStore.getItemAsync('token');
// Your fetch code
this.setState({ loaded: false, error: null });
const url = 'https://www.myWebsite.com/api/auth/isLoggedIn';
const h = new Headers();
h.append('Authorization', `Bearer ${token}`);
h.append('Content-Type', 'application/json');
h.append('X-Requested-With', 'XMLHttpRequest');
const req = new Request(url, {
headers: h,
method: 'GET',
});
fetch(req)
.then(response => response.json())
.then(this.setState({ token: isSet }));
console.log(token);
console.log('**************');
};