为什么根据异步存储值更改initialRoute不起作用?

Question

在我的react native App.js文件中

我想控制用户登录状态。由于我使用react native async storage将用户登录状态保存在本地存储中，因此我想根据该值更改初始屏幕。

所以在app.js中useEffect钩子我有这样的东西

const [initialRoute, setInitialRoute] = useState('AuthChoice');
useEffect(() => {
async function getStorageValue() {
let value;
try {
value = await AsyncStorage.getItem('isLoggedIn');
} catch (e) {
// handle here
} finally {
console.log(value === 'true');
if (value === 'true') {
setInitialRoute('Home');
} else {
setInitialRoute('AuthChoice');
}
}
}
getStorageValue();
}, []);

返回状态意味着我正在根据设置的状态值

改变屏幕

return (
<>
<Provider store={store}>
<NavigationContainer>
<Stack.Navigator initialRouteName={initialRoute}>
<Stack.Screen
options={{
headerShown: false,
}}
name="AuthChoice"
component={AuthChoiceScreen}
/>

但是当我进入应用程序时，即使我在之前的会话中登录过，该应用程序也从未引导我进入homePage。

Answer 1

这样做的原因是使用效果是异步的，而React导航的初始路由不是。在从异步存储(顾名思义就是async)加载数据之前，初始路由要么被设置为default，要么未定义。在本例中，它将打开

首页

我假设这是你在数组/对象中的第一个路由。

该怎么办?

你应该创建一个加载组件，它是导航的父组件。当你从存储中获取数据时，设置某种类型的旋转器，然后使用条件渲染来打开路由器导航，并将初始路由作为prop传递。

例子:

const MainLoader = () => {
const [initialised, setInitialised] = useState(false)
const [initialRoute, setInitialRoute] = useState('AuthChoice')
useEffect(() => {
async function getStorageValue() {
let value;
try {
value = await AsyncStorage.getItem('isLoggedIn');
} catch (e) {
// handle here
} finally {
console.log(value === 'true');
if (value === 'true') {
setInitialRoute('Home');
} else {
setInitialRoute('AuthChoice');
}
setInitialised(true)
}
}
getStorageValue();
}, []);
return initialised
? <Router initialRoute={initialRoute} />
: <LoadingSpinner />
}
const Router = (props) => {
return (
<>
<Provider store={store}>
<NavigationContainer>
<Stack.Navigator initialRouteName={props.initialRoute}>
<Stack.Screen
options={{
headerShown: false,
}}
name="AuthChoice"
component={AuthChoiceScreen}
/>
</Stack.Navigator>
</NavigationContainer>
</Provider>
</>
}