上下文:我试图在用户登录时进行身份验证,从后端获取令牌并将其存储在SecureStore中,以便稍后根据存储的令牌导航到配置文件屏幕或注册和登录屏幕。在react-native中:
访问注册或配置文件屏幕的代码取决于它是否存储了令牌:
const MusicScreen = () => {
//Constante de navegación
const navigation = useNavigation();
//Estado para sacar el token de asyncStorage
const [token, setToken] = useState(null);
//Saca el token y lo almacena temporalmente en setToken
const getToken = async () => {
try {
const storedToken = await SecureStore.getItemAsync('token');
setToken(storedToken);
console.log(storedToken)
} catch (error) {
console.error('Error al obtener el token:', error);
}
};
const handleIconPress = () => {
getToken();
if (token === null) {
navigation.navigate('Register');
} else {
navigation.navigate('Profile');
}
};
return (
<View >
<LinearGradient
colors={['#c501e2','#fe0ab7','#ae3dff','transparent']} style={styles.Background}>
<TouchableOpacity onPress={handleIconPress} style={styles.touchable}>
<Image source={require('../files-logos/D-Corchea.png')} style={styles.image}/>
</TouchableOpacity>
</LinearGradient>
</View>
)};
字符串
然后,在配置文件屏幕上注销的代码:
const logout = async() => {
try{
await SecureStore.deleteItemAsync('token');
const storedToken = await SecureStore.getItemAsync('token');
console.log(storedToken);
}catch(e){
console.log('Error trying to delete de token:', e);
}
}
const ProfileScreen= () => {
const navigation = useNavigation();
return (
<View>
<Background1/>
<Text style={{fontWeight:'bold',}}>THis is the profile screen</Text>
<Button title='logout' onPress={()=>{
logout();
navigation.navigate('Register');
}} />
</View>
)};
export default ProfileScreen;
型
问题是它不能完全正常工作,因为它正确地更新了SecureStore中的值,但在您第二次单击它时,它会正确导航。
我试过useEffect,但是useEffect是用来在渲染组件时更新值的,而不是在点击组件时。
1条答案
按热度按时间2guxujil1#
经过一天的思考如何解决这个问题,我有什么选择,最后我找到了正确的方法。主要的问题是useState不能立即更新值,常见的解决方案是使用useEffect,问题是每次我按下buttom时都想更新值,但useEffects在渲染组件时起作用。
解决方案是创建一个从SecureStore返回值的外部函数,然后在onpress的函数中,它将值保存在常量中。这对我来说是有效的,这里是代码:
字符串