reactjs 尝试路由和身份验证的上下文时,React Native表示函数不存在

qmelpv7a  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(126)

这是我的第一个真实的的移动的应用程序,当我试图实现auth和路由时,我遇到了一些问题-错误消息和我猜测的功能太多
我的应用程序目前有两个堆栈,一个是auth堆栈,另一个是drawer堆栈。我将auth堆栈作为默认堆栈,并希望在用户登录时显示drawer堆栈。如果用户已注销,则显示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作为prepend添加,但没有成功。我确定这是一个简单的React操作,但我不确定,因为我在Node.js工作时通常不会这样编码。

kwvwclae

kwvwclae1#

checkAuth的作用域是AuthProvider。如果您希望将其提供给AuthContext的使用者,则需要将其包含在AuthContext.Providervalue属性中,但我认为您只需要使用已经提供给使用者的auth
下面是有关useContext挂钩的一些信息,您可以通过该挂钩访问这些属性。https://reactjs.org/docs/hooks-reference.html#usecontext

相关问题