reactjs 无法访问app.js react-native中的上下文

fkaflof6 于 2022-12-12 发布在 React

关注(0)|答案(2)|浏览(160)

我目前正在尝试在一个react原生应用程序中使用context。我的context代码如下所示：

import React, { useState, createContext } from 'react'

export const AuthContext = createContext()

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null)

return (
    <AuthContext.Provider value={{ currentUser}}>
      {children}
    </AuthContext.Provider>
  )
}

然后，我将上下文导入App.js，并将App.js Package 在提供程序中，如下所示：

import React, { useContext } from 'react'
import { AuthProvider, AuthContext } from './src/Context/AuthContext'
other imports etc...

export default function App() {
  const { currentUser } = useContext(AuthContext)
  return (
    <>
      <AuthProvider>
        <IconRegistry icons={EvaIconsPack} />
          <NavigationContainer>
            <RootStackScreen isAuth={false} />
          </NavigationContainer>
      </AuthProvider>
    </>
  )
}

当我尝试访问app.js中的currentUser时，收到以下错误：

component exception: undefined is not an object, evalauting useContext.currentUser

如果我尝试在应用程序的其他组件中访问当前用户;但是，我没有收到此错误，currentUser控制台日志的正确值为null。我想知道我如何才能访问app.js中的上下文。是否可以在auth提供程序中 Package react-native应用程序的index.js？或者我在上下文方面做错了什么。
react-native版本：0.63.3版本React：16.13.1

reactjs

来源：https://stackoverflow.com/questions/64956581/unable-to-access-context-in-app-js-react-native

2条答案

按热度按时间

lqfhib0f1#

这是因为您正在访问提供程序外部的上下文。
如果选中createContext，则表示未提供默认值。

export const AuthContext = createContext(/*No default value*/)

在提供程序外部调用useContext时，它将使用默认值（在您的情况下为“undefined”），并且在您尝试访问undefined的currentUser属性时引发错误。
解决此问题的一种方法是使用app.js文件中的状态，而不是使用单独的提供程序组件。

export default function App() {
  
  const [currentUser, setCurrentUser] = useState(null);
  const state={currentUser, setCurrentUser};

  return (
    <>
        <AuthContext.Provider value={state}>
        <IconRegistry icons={EvaIconsPack} />
          <NavigationContainer>
            <RootStackScreen isAuth={false} />
          </NavigationContainer>
        </AuthContext.Provider 
    </>
  )
}

这不会对其他组件产生任何影响，而且您可以像访问任何状态一样轻松地访问currentUser变量。

赞(0）回复(0）举报 2022-12-12

w1jd8yoj2#

我没有使用上面的答案，但是我把AuthContext.Provider移到了index.js文件中，并把App组件封装在其中。现在它对我来说工作得很好。我这样做是因为在App.js中，由于导航和路由逻辑，我有很大的代码。
使用它，我们可以保持上下文逻辑的分离。
例如

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import * as serviceWorker from "./serviceWorker";
import "./index.css";
import { AuthProvider } from './src/Context/AuthContext'

ReactDOM.render(
    <AuthProvider>
      <App />
    </AuthProvider>
  document.getElementById("root")
);
serviceWorker.unregister();

赞(0）回复(0）举报 2022-12-12

我来回答

reactjs 无法访问app.js react-native中的上下文

2条答案

相关问题

热门标签

最新问答