当我切换用户并且我正在使用 react-native 和 firebase 时，我必须刷新我的应用程序以显示正确的屏幕答案

【问题标题】：I have to refresh my app to display the right screen when i switch the user and I'm using react-native and firebase当我切换用户并且我正在使用 react-native 和 firebase 时，我必须刷新我的应用程序以显示正确的屏幕
【发布时间】：2023-02-03 01:37:42
【问题描述】：

**我有两个用户管理员和用户，当我以用户身份登录时，我显示用户主屏幕，当我注销并以管理员身份登录时，我仍然看到用户主屏幕，直到我刷新我的应用程序，然后我才能看到管理员主屏幕 **

这是我的代码：

import { auth, db } from '../../firebase';

const Home = ({navigation})=>{

    const [modalVisible, setModalVisible]=useState(false)
    const [formType, setFormType] = React.useState("")

    const [user, setUser] = useState(null) // This user
    const [users, setUsers] = useState([]) // Other Users

    useEffect(() => {
        db.collection("users").doc(auth?.currentUser.uid).get()
            .then(user => {
                setUser(user.data())
            })
    }, [])

    useEffect(() => {
        if (user)
            db.collection("users").where("role", "==", (user?.role === "admin" ? 'admin' : null))
                .onSnapshot(users => {
                    if (!users.empty) {
                        const USERS = []

                        users.forEach(user => {
                            USERS.push(user.data())
                        })

                        setUsers(USERS)
                    }
                })
    }, [user])

    const handleSignOut = ()=>{
        auth
        .signOut()
        .then(()=>{
          navigation.navigate('SignIn')
        })
        .catch(error => alert(error.message))
      }

   return(
        <View>
            {user?.role === 'admin'? <AdminScreen />:<UserScreen/>}
        </View>
    )

**请帮我解决这个问题我几天前试图解决它但我不能，如果有人能伸出援手并提前感谢你我将非常感激**

【问题讨论】：

标签： reactjs firebase react-native react-hooks

【解决方案1】：

尝试像这样更新您的状态：

import { auth, db } from '../../firebase';

const Home = ({navigation})=>{
    const [modalVisible, setModalVisible]=useState(false)
    const [formType, setFormType] = React.useState("")

    const [user, setUser] = useState(null) // This user
    const [users, setUsers] = useState([]) // Other Users

    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(async user => {
            if (user) {
                const userData = await db.collection("users").doc(user.uid).get();
                setUser(userData.data());
            } else {
                setUser(null);
            }
        });
        return () => unsubscribe();
    }, [])

    useEffect(() => {
        if (user) {
            const unsubscribe = db.collection("users").where("role", "==", (user?.role === "admin" ? 'admin' : null))
                .onSnapshot(users => {
                    if (!users.empty) {
                        const USERS = []

                        users.forEach(user => {
                            USERS.push(user.data())
                        })

                        setUsers(USERS)
                    }
                });
            return () => unsubscribe();
        }
    }, [user])

    const handleSignOut = ()=>{
        auth
        .signOut()
        .then(()=>{
          navigation.navigate('SignIn')
        })
        .catch(error => alert(error.message))
      }

   return(
        <View>
            {user?.role === 'admin'? <AdminScreen />:<UserScreen/>}
        </View>
    )

【讨论】：