为什么useContext在组件中返回null，即使其父标记被标记为Provider

Question

在过去的几个小时里，我一直试图使用react钩子和react上下文在我的子react组件中访问用户状态，但我无法理解。在本网站上发布的其他几个相关问题中，useContext返回null/undefined，因为使用它的组件没有被标记为Provider的标记所包围。

在这里，我已经做了这个，但它仍然不起作用。当我记录useContext(AuthContext(的值时，它返回null，但当我记录分配给AuthContext.Provider的对象时，它显示用户数据。我们将不胜感激。

App.js

import * as React from 'react';
import { Text, Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// import firebase
import firebase from './firebase.js';
console.log(firebase)
const db = firebase.database();
var isSignedIn = true;
var testing = true
import AuthNavigator from './src/navigation/AuthNavigator'
export default function App() {
return <AuthNavigator />
}

AuthNavigator.js

import firebase from './../../firebase.js';
// import auth from '@react-native-firebase/auth'
import SignInStack from './SignInStack'
import SignOutStack from './SignOutStack'
import TestScreen from './TestScreen'
export const AuthContext = createContext(null)
export default function AuthNavigator() {
const [initializing, setInitializing] = useState(true)
const [user, setUser] = useState(null)

// Handle user state changes
function onAuthStateChanged(result) {
setUser(result)
console.log(result);
if (initializing) setInitializing(false)
}

useEffect(() => {
const authSubscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged)
console.log("getting here...")
// unsubscribe on unmount
return authSubscriber
}, [])

if (initializing) {
return null
}
console.log('Hello World')
console.log(user)
return !user ? (
<AuthContext.Provider value={user}>
<SignInStack />
</AuthContext.Provider>
) : (
<AuthContext.Provider value={user}>
<TestScreen/>
</AuthContext.Provider>
)
}

TestScreen.js

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useContext } from 'react'
import { AuthContext } from './../navigation/authnavigator.js'
export default function TestScreen() {
console.log(useContext(AuthContext))
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Likes You</Text>
</View>
);
}

Answer 1

return !user ? (
<AuthContext.Provider value={user}>
<SignInStack />
</AuthContext.Provider>
) : (
<AuthContext.Provider value={user}>
<TestScreen/>
</AuthContext.Provider>
)
}

这部分对我来说似乎有问题，因为你正在创建两个单独的AuthContext.Providers。

你应该做一些类似的事情

return
<AuthContext.Provider value={user}>
{ !user? <SignInStack />:
<TestScreen/>}
</AuthContext.Provider>  

相反。或者，您可能想要从自己的代码中重新制定一些基本的登录策略。

Answer 2

您似乎没有从Reactnamespace调用useContext。

更新你的代码到这个-

React.useContext(AuthContext)

而不是这个-

useContext(AuthContext)

为了更好地衡量，也请更改此项。

export const AuthContext = React.createContext(null)