我的 createContext() 无法与 @react-native-firebase/app 一起使用

Question

我创建了一个 useContext 来全局访问我的react-native-firebase/auth。

我正在使用

expo run:ios

运行应用程序，我已经完成了

pod update

并且没有错误。

所有组件都不再正常工作，注册时工作正常，但我不知道发生了什么。

我的 AuthProvider 的文件树是：

我的应用程序屏幕如下：

我正在使用 expo-router，这是我的主要组件的 package.json

"main": "expo-router/entry",

出于某种原因，我的AuthProvider这个错误：

LOG: User NOT SIGNED IN

当我按下我的

<TextInput/>

时，它也显示此错误：

RemoteTextInput] -[RTIInputSystemClient
remoteTextInputSessionWithID:performInputOperation:]  perform input
operation requires a valid sessionID

我已经在我的

dashboard.js

中实现了这个功能：（我已经导入了AuthContext（））

  const { user } = useContext(AuthContext);
  const router = useRouter();

  useEffect(() => {
    if (!user) {
      console.log("User NOT SIGNED IN");
      router.push("/(home)/login"); // Redirect to login if no user
    } else {
      console.log("User SIGNED IN: ", user.email);
    }
  }, [user, router]);

这是我的

Redirect.js

:

import React from "react";
import { Redirect } from "expo-router";


const Index = () => {
  

  if (!user) {
    // If there's no user, redirect to login
    return <Redirect href="/(home)/login" />;
  }

  // If there is a user, redirect to dashboard
  return <Redirect href="/(tabs)/dashboard" />;
};

export default Index;

我的

index.js

：

import React from "react";
import { AuthProvider } from "../src/context/AuthProvider";
import RedirectComponent from "../components/RedirectComponent";

const Index = () => {
  return (
    <AuthProvider>
      <RedirectComponent />
    </AuthProvider>
  );
};

export default Index;

这是我的

AuthProvider.js

:

 import React, { createContext, useState } from "react";
import auth from "@react-native-firebase/auth";
import firestore from "@react-native-firebase/firestore";

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <AuthContext.Provider
      value={{
        user,
        setUser,
        login: async (email, password) => {
          try {
            const response = await auth().signInWithEmailAndPassword(
              email,
              password
            );
            setUser(response.user);
          } catch (error) {
            // Handle login error
            console.error("Login failed:", error);
          }
        },
        register: async (email, password) => {
          try {
            await auth()
              .createUserWithEmailAndPassword(email, password)
              .then(() => {
                //Once the user creation has happened successfully, we can add the currentUser into firestore
                //with the appropriate details.
                firestore()
                  .collection("users")
                  .doc(auth().currentUser.uid)
                  .set({
                    fname: "",
                    lname: "",
                    email: email,
                    createdAt: firestore.Timestamp.fromDate(new Date()),
                    userImg: null,
                  })
                  //ensure we catch any errors at this stage to advise us if something does go wrong
                  .catch((error) => {
                    console.log(
                      "Something went wrong with added user to firestore: ",
                      error
                    );
                  });
              })
              //we need to catch the whole sign up process if it fails too.
              .catch((error) => {
                console.log("Something went wrong with sign up: ", error);
              });
          } catch (e) {
            console.log(e);
          }
        },
        logout: async () => {
          try {
            await auth().signOut();
          } catch (e) {
            console.log(e);
          }
        },
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

这是我的

_layout.js

:

// ./app/(tabs)/_layout.js
import React from "react";
import AuthProvider from "../../src/context/AuthProvider";
import AppRoutes from "./(router)";

const Layout = () => {
  return (
    <AuthProvider>
      <AppRoutes />
    </AuthProvider>
  );
};
export default Layout;

Answer 1

为了让它工作，我必须在我的 AuthProvider.js 中添加一个

useEffect()

钩子。这更新了我的用户变量以在

useContext()

钩子

中工作

身份验证提供程序被放置在我的函数中，如下面的代码所示：

useEffect(() => {
    const subscriber = auth().onAuthStateChanged((user) => {
      setUser(user);
      if (user) {
        router.push("/dashboard");
      } else {
        router.push("/login");
      }
    });
    return subscriber; //
  }, []);