React Native 在验证单输入并导航到其对应的屏幕时,条件出现问题

zd287kbt  于 2023-08-07  发布在  React
关注(0)|答案(1)|浏览(85)

上下文:我试图在用户登录时进行身份验证,从后端获取令牌并将其存储在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是用来在渲染组件时更新值的,而不是在点击组件时。

2guxujil

2guxujil1#

经过一天的思考如何解决这个问题,我有什么选择,最后我找到了正确的方法。主要的问题是useState不能立即更新值,常见的解决方案是使用useEffect,问题是每次我按下buttom时都想更新值,但useEffects在渲染组件时起作用。
解决方案是创建一个从SecureStore返回值的外部函数,然后在onpress的函数中,它将值保存在常量中。这对我来说是有效的,这里是代码:

const getToken = async() =>{
          try {
             const storedToken = await SecureStore.getItemAsync('token');
             return storedToken;
          } catch (error) {
            console.error('Error al obtener el token:', error);
            return null;
          }
        };

const MusicScreen = () => {

    //Constante de navegación
    const navigation = useNavigation();
    //Saca el token y lo almacena temporalmente en setToken

    const handleIconPress = async () => {
        const storedToken = await getToken();
        console.log(storedToken)
        if (storedToken === 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>     
  )};

字符串

相关问题