state 未在 React Native 中为新用户更新

Question

My app has a test sheet, if a user passes the test he is shown a passing screen and then the state is saved using asyncstorage. But the problem here is, let's say i have user A and user B and user A is currently logged in, he passed the test and the app shows him passing screen and the state is saved. Now user A logs out and user B logs in, he is a completely new user he has never given test before but my app has still saved the state for the user A and keeps showing passing screen even to the user B rather it should not.Can someone help me with this issue?

code:

import React ,{useState, useEffect} from "react";
import {View, Alert, Image, StyleSheet, Text, Modal, TouchableOpacity, TouchableHighlight} from 'react-native';
import Voice from 'react-native-voice';
import auth from '@react-native-firebase/auth';


import AsyncStorage from '@react-native-async-storage/async-storage';
  const key = auth().currentUser.uid + "hasPassed"
  

export const hasPassed = async () => {
    return AsyncStorage.getItem(key).then(result => result != null ? JSON.parse(result) : undefined).catch(e => console.log(e))    
}

export const setHasPassed = async (newPassed) => {
    return AsyncStorage.setItem(key, JSON.stringify({hasPassed: newPassed})).catch(e => console.log(e))
}



export default alpht =({navigation}) => { 

 
 function Check() {
  if (results.includes(words[index])){
 
    Alert.alert('Correct!','You are learning so well!');
    
     if(index==7) {
      if(count<=5)
      {
           
        setHasPassed(true).then(() => setshowpass(true))
        //  setshowpass(true);
      }
      else{
        console.log(count)
        Alert.alert('fail','fail');
      }
    }
    if (index==7){
      setndis(true);
      setdis(true);
      setidis(true);
    }
    else{
   setndis(false);
   setdis(true);
   setidis(true);
    }
   
  }
  else{
    Alert.alert('Ops!','Looks like you went wrong somewhere. Try again!');
    setcount(count+1);
    
    setdis(true);
    setndis(true);
   
    if(count==5){
      Alert.alert('Restest', 'Looks like you had way too many mistakes!')
      setind(0);
      setcount(0);
      setdis(true);
    }
  }
}


  const words=['ceket', 'çilek', 'elma', 'fare', 'öğretmen', 'otobüs', 'şemsiye', 'uçak'];
  const [show, setshow]=useState('');
    const [showpass, setshowpass]=useState(false);
    useEffect(() => {
     //console.log(auth().currentUser.uid);
        setshow(true);
      }, []);

      useEffect(() => {
        const getState = async () => {
          const result = await hasPassed()
          setshowpass(result ? result.hasPassed : false)
      }
      getState()
     
      }, []);

     
      console.log(auth().currentUser.uid)
      if (showpass === false) {

         
        // setshow(true)
        console.log('hey');
       return null
      }
return (
//... other code
)
}

my user logs out using auth().signOut() by the way, It would be great if this issue gets solved i am dealing with it for the past 4,5 days now!

Answer 1

I don't know exactly what's going wrong in your code, but I believe that the piece of code in your useEffect is fetching the state of user A no matter who is logged in ( state persistence). try testing with user C. check out firebase state persistence in their official documentation. I hope I gave you some hints to solve this issue.

Answer 2

I think this is the problem:

const key = auth().currentUser.uid + "hasPassed"
  
export const hasPassed = async () => {
    return AsyncStorage.getItem(key).then(result => result != null ? JSON.parse(result) : undefined).catch(e => console.log(e))    
}

export const setHasPassed = async (newPassed) => {
    return AsyncStorage.setItem(key, JSON.stringify({hasPassed: newPassed})).catch(e => console.log(e))
}

key is defined at the top level, outside of the react lifecycle, and thus is subject to having stale values. auth().currentUser may change, the value of key will not (I think). Instead of storing key as a string, try storing it as a function:

// every time getKey is called it will get a fresh instance of currentUser
const getKey = ()=>auth().currentUser.uid + "hasPassed"

export const hasPassed = async () => {
  return AsyncStorage.getItem(getKey()).
    then(result => result != null ? JSON.parse(result) : undefined).
    catch(e => console.log(e))    
}

export const setHasPassed = async (newPassed) => {
  return AsyncStorage.setItem(
    getKey(),
    JSON.stringify({hasPassed: newPassed})
  ).catch(e => console.log(e))
}