使用 React native 导入上下文时出错

Question

我正在学习在 React native 中使用上下文，实际上我正在关注一个博客，其中定义了如何在任何具有 React 和 Navigation 的应用程序中使用 createContext 和 useContext 进行身份验证逻辑。 在博客中没有定义如何导入类 AuthService 并在另一个组件中使用上下文，我有一个错误，因为当我尝试在我的导航器页面或登录页面中导入它们时函数和状态不存在。

代码：

AuthService.tsx

import React, {createContext, useState, useEffect} from 'react'
import AsyncStorage from '@react-native-community/async-storage'

const AuthContext = createContext({});

const AuthProvider = ({ children }) => {
   const [auth, setAuthState] = useState({});

   useEffect(() => {
     GetLogedUser();
   }, []);

   const GetLogedUser=async()=> {
     try {
        let userData = await AsyncStorage.getItem("userloged"|| {});
        let data = JSON.parse(userData);
        return data;
      } catch (error) {
        console.log("Something went wrong", error);
        setAuthState({});
        return null;
      }
   }

   const LoginUser=async(AuthData)=>{
     try{
        //many code omited...
        if(response.status==200 && json.response === true && json.error===""){
            let authUser = {id : json.data.id, nick: AuthData.nick, services: json.data.services };
            await AsyncStorage.setItem("userloged", JSON.stringify(authUser));
            setAuthState(authUser);
            return "OK";
        }
        else{
            return "Error response Login Service - "+ json.error; 
        }
     }catch(err){
        return "Error connecting or timeout service."; 
     }
   }

   return (
     <AuthContext.Provider value={{ auth, LoginUser }}>
      {children}
     </AuthContext.Provider>
   );
 }

 export { AuthContext, AuthProvider };

Navigator.tsx（auth导入状态如何使用？）

import React, {useContext} from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import Login from '../Views/Login'
import Home from '../Views/Home'
import {AuthContext} from '../Services/Auth/AuthService'

const Stack = createStackNavigator();

const Navigator= (props) =>{
  const { auth } = useContext(AuthContext);

  return (
        <Stack.Navigator>
            {auth.id ? // <-- error undefined is not and object
                (<>    
                    <Stack.Screen name="Home" component={Home} options={{headerShown:false}}/>
                </>)
            :   (<>  
                    <Stack.Screen name="Login" component={Login}  options={{headerShown:false}}/>
                    <Stack.Screen name="Register" component={Register} options={{title:'Register.'}}/>                        
                </>)
            }
        </Stack.Navigator>
    );
 }

 export default Navigator;

Login.tsx（LoginUser导入函数如何使用？？？）

//..another imports omited
import {AuthContext} from '../Services/Auth/AuthService'

const Login=(props)=>{
   const {LoginUser} = useContext(AuthContext); //<---how here?
   const {navigation, users} = props;
   const [userName, setUserName] =useState('');
   const [password, setPassword] =useState('');

   return(
    <View style={styles.container}>
            <View style={styles.middleContainer}>
                <TextInput placeholder="Username..." defaultValue={userName} onChangeText={txt=> setUserName(txt)} style={styles.txtInputsLog}/>
                <TextInput placeholder="Password..." defaultValue={password} onChangeText={txt=> setPassword(txt)} style={styles.txtInputsLog} secureTextEntry={true}/>
                <Button primary style={styles.btnLogin} onPress={async ()=> await ValidateFields(userName, password) ? navigation.navigate('Home') : null}> 
                    <Text style={styles.txtLogin}>Login</Text> 
                </Button>            
            </View>     
    </View>
  );

  async function ValidateFields(userName:string, password:string){
    let result = await LoginUser({nick:userName, password: password}); //<--Error LoginUser is not a function
    return result==="OK" ? true: false;
  }
}

export default Login;

Answer 1

你能说明你在哪里导入和使用你的<AuthProvider />吗？

您似乎没有使用您的<AuthProvider /> 组件。 因此，您可以尝试用您的<AuthProvider /> 包装您的Navigator 组件，如下所示：

<AuthProvider>
    <Navigator />
</AuthProvider>

在您的代码示例中，您只是创建了一个 AuthProvider 挂钩，导入了它的数据，但您没有将代码放入上下文中。 因此，为了使上下文充分发挥作用，需要将需要该上下文的组件包装在其中。