时间戳

首页 > 解决方案 > 使用 useContext 显示错误：未定义不是对象

javascript - 使用 useContext 显示错误：未定义不是对象

问题描述

我正在尝试在 React-Native 中编写登录屏幕，但出现以下错误： 在此处输入图像描述

我的 SignInScreen 代码：

import React from 'react';

import { 
    View, 
    Text, 
    TouchableOpacity, 
    TextInput,
    Platform,
    StyleSheet ,
    StatusBar,
    Alert
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import LinearGradient from 'react-native-linear-gradient';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';

import { useTheme } from 'react-native-paper';

import { AuthContext } from '../components/context';

import Users from '../model/users';

const SignInScreen = ({navigation}) => {

    const [data, setData] = React.useState({
        username: '',
        password: '',
        check_textInputChange: false,
        secureTextEntry: true,
        isValidUser: true,
        isValidPassword: true,
    });

    const { colors } = useTheme();

    const { signIn } = React.useContext(AuthContext);

    const textInputChange = (val) => {
        if( val.trim().length >= 4 ) {
            setData({
                ...data,
                username: val,
                check_textInputChange: true,
                isValidUser: true
            });
        } else {
            setData({
                ...data,
                username: val,
                check_textInputChange: false,
                isValidUser: false
            });
        }
    }

我的 context.js：

import React from 'react';

export const AuthContext = React.createContext();

我的 app.js：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SignInScreen from "./screens/SignInScreen";


export default function App() {
  return <SignInScreen/>;
}

我只是想知道它是否缺少一些组件，我该如何解决？而且我已经尝试重新安装我的软件包。

标签： javascriptandroidiosreact-nativeexpo

解决方案

您需要在signIn某处为上下文提供该功能。通常，这是通过上下文提供程序实现的。您可以在文档中找到更多信息。它可能看起来像这样：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SignInScreen from "./screens/SignInScreen";

export const AuthContext = React.createContext();
const signIn = () => {
  // ... sign into an account or something
}

export default function App() {
  return (
    <AuthContext.Provider value={{signIn}}>
        <SignInScreen/>
    </AuthContext.Provider>
  )
}

但是，可能值得阅读文档并考虑为什么在这里使用上下文，因为这通常不是登录功能在 React/React-Native 中的工作方式。

推荐阅读