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

问题描述

在过去的几个小时中，我一直在尝试使用户状态可以在我的子反应组件中使用react-hooks和react-context进行访问，但我无法弄清楚。在此网站上发布的其他几个相关问题中，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>
  );
}

解决方法

您似乎没有从React useContext呼叫namespace。

将您的代码更新为此-

React.useContext(AuthContext)

代替这个-

useContext(AuthContext)

为了很好的措施，也请更改此设置。

export const AuthContext = React.createContext(null)

,

    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>  
  

相反。或者，您可能想根据自己的代码重新编写一些基本的登录策略。