为什么useContext在组件中返回null，即使它的父标记被标记为提供程序？

Question

在过去的几个小时里，我一直在尝试使用react-hooks和react-context在我的子react组件中访问用户状态，但我无法弄清楚。在这个网站上发布的其他几个相关问题中，useContext返回了null/undefined，因为使用它的组件没有被标记为提供者的标记所包围。

在这里，我已经这样做了，但它仍然不起作用。当我记录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.Provider。

你应该像这样做

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

而不是。或者你可能想从你自己的代码中修改一些基本的登录策略。

Answer 2

您似乎没有从React namespace调用useContext。

将您的代码更新为以下内容-

React.useContext(AuthContext)

而不是这个-

useContext(AuthContext)

为了更好地衡量，请同时更改此设置。

export const AuthContext = React.createContext(null)