React Native 在尝试路由和身份验证的上下文时说函数不存在答案

【问题标题】：React Native says function doesn't exist when trying context for routing and authReact Native 在尝试路由和身份验证的上下文时说函数不存在
【发布时间】：2022-11-12 09:10:52
【问题描述】：

这是我的第一个真正的移动应用程序，当我尝试实现身份验证和路由时，我遇到了一些问题 - 错误消息和我猜测的功能

我的应用程序目前有两个堆栈，一个身份验证堆栈和一个抽屉堆栈。我将 auth 堆栈作为默认堆栈，如果用户已登录，我想显示抽屉堆栈。如果他们已注销，则向他们显示 auth 堆栈，直到他们登录。

我的根堆栈导航器中有这行代码

{ auth ? <Stack.Screen name="Auth" component={AuthStack} />:<Stack.Screen name="Drawer" component={DrawerStack} />}

在我的堆栈导航器上方我有这一行

const { auth } = checkAuth()

使用 - 正确的文件路径导入

import { AuthProvider, checkAuth } from '../context/AuthContext'

该导入的基本代码如下

const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState(null);

    const checkAuth = () => {
      try {
        const authData = globalStorage.getString('accessToken')
        if(authData !== null && authData !== undefined) {
          setAuth(authData)
        }
      } catch(e) {
        console.error(e)
      }
    }

  const removeAuth = () => {...};

  const setAuthState = data => {
    try {
      console.log('setAuthState Data: ', data)
      globalStorage.set('accessToken', data)
      setAuth(data);
    } catch (err) {
      console.error(err);
    }
  };

  useEffect(() => {
    checkAuth();
  }, []);

  return (
    <AuthContext.Provider value={{ auth, setAuthState, removeAuth}}>
      {children}
    </AuthContext.Provider>
  );
};

我在 iOS 模拟器中看到的错误消息是 checkAuth 不是函数。我不确定为什么在我进行导入时不是。我尝试添加 AuthProvider 作为前置但没有运气。我确信这是一个简单的 React 事情，但我不确定，因为当我做 Node.js 工作时，我通常不会这样编码。

编辑

import { AuthProvider, checkAuth } from '../context/AuthContext'

...


const AppNavigation = () => {
  return (
      <AuthProvider>
        <RootNavigator />
      </AuthProvider>
  );
};

...

错误信息

undefined is not an object (evaluating '_react.React.createElement')

【问题讨论】：

您还没有从AuthContext 文件中显示您的exporting，但是由于您已经在AuthProvider 函数中定义了checkAuth，因此您无法导出checkAuth无论如何都可以从中发挥作用。您可以使用 const {auth} = useContext(AuthContext); 来获取 auth 的值，而不是尝试使用 checkAuth()
@NickParsons 抱歉耽搁了所以直到今天的电子邮件才让我知道回复。无论如何，当我在编辑 OP 时使用代码时，我收到关于未定义内容的错误。这仅在我使用您提供的代码时才会发生，因此不确定是否以其他方式损坏？

标签： javascript reactjs react-native

【解决方案1】：

checkAuth 的范围为 AuthProvider。如果你想让你的AuthContext的消费者可以使用它，你会想把它包含在AuthContext.Provider的value道具中，但我想你只想使用已经提供的auth给消费者。

这是useContext 挂钩的一些信息，您可以在其中访问这些属性。 https://reactjs.org/docs/hooks-reference.html#usecontext

【讨论】：