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

Question

我目前正在尝试在react本机应用程序中使用上下文。我的上下文代码如下：

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包装在提供者中，如下所示：

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中访问上下文。是否可以将react原生应用程序的index.js封装在auth提供程序中？还是我在上下文方面做错了什么。

react native版本：0.63.3react版本：16.13.1

Answer 1

发生这种情况是因为您正在访问提供程序之外的上下文。

如果检查createContext，则不会提供默认值。

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

当在提供程序外部调用useContext时，它将使用默认值(在您的情况下为"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变量。

Answer 2

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

使用它，我们可以保持上下文逻辑的分离。我在React.js中使用了这个，而不是在ReactNative 中使用

前任。

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();

Answer 3

我只是简单地将<App />封装在index.js文件中。它的效果和以前一样好。

import App from './App';
import {name as appName} from './app.json';
import AuthProvider from './Components/AuthProvider';
const AppWrapper =()=>{
return(
<AuthProvider>
<App />
</AuthProvider>
)
}
AppRegistry.registerComponent(appName, () => AppWrapper);```