TypeError：在React Native中使用上下文时，undefined不是对象评估'_useContext.dispatch'

问题描述

我只是按照本机课程的步骤操作，当我使用上下文处理登录时，出现此错误：

我查看了代码，它等于讲师的代码。代码如下：

src / signIn / index.js

import React,{useState,useContext} from 'react';
import {useNavigation} from '@react-navigation/native';
import AsyncStorage from '@react-native-community/async-storage';
import { UserContext } from '../../contexts/UserContext';
import {
    Container,InputArea,CustomButton,CustomButtonText,SignMessageButton,SignMessageButtonText,SignMessageButtonTextBold,} from './styles';

import Api from '../../Api';

import SignInput from '../../components/SignInput';

import BarberLogo from '../../assets/barber.svg';
import EmailIcon from '../../assets/email.svg';
import LockIcon from '../../assets/lock.svg';

export default () => {
    const {dispatch: userDispatch} = useContext(UserContext);
    const navigation = useNavigation();

    const [emailField,setEmailField] = useState('');
    const [passwordField,setPasswordField] = useState('');

    const handleSignCLick = async () => {
        if (emailField != '' && passwordField != '') {
            let json = await Api.signIn(emailField,passwordField);

            if (json.token) {
                alert('WORKS!!');
                
                await AsyncStorage.setItem('token',json.token);

                userDispatch({
                    type: 'setAvatar',payload: {
                        avatar: json.data.avatar
                    }
                });

                navigation.reset({
                    routes:[{name:'Maintab'}]

                });

            } else {
                alert('Wrong email or password!');
            }
        } else {
            alert('Fill in the form');
        }
    };

    const handleMessageButtonClick = () => {
        navigation.reset({
            routes: [{name: 'SignUp'}],});
    };

    return (
        <Container>
            <BarberLogo width="100%" height="160" />

            <InputArea>
                <SignInput
                    placeholder="Type your email"
                    IconSvg={EmailIcon}
                    value={emailField}
                    onChangeText={(t) => setEmailField(t)}
                />
                <SignInput
                    placeholder="Type your password"
                    IconSvg={LockIcon}
                    value={passwordField}
                    onChangeText={(t) => setPasswordField(t)}
                    password={true}
                />

                <CustomButton onPress={handleSignCLick}>
                    <CustomButtonText>LOGIN</CustomButtonText>
                </CustomButton>
            </InputArea>

            <SignMessageButton onPress={handleMessageButtonClick}>
                <SignMessageButtonText>
                    Does not have an account?
                </SignMessageButtonText>
                <SignMessageButtonTextBold>
                    Sing up
                </SignMessageButtonTextBold>
            </SignMessageButton>
        </Container>
    );
};

当我在应用程序下面的这一行中评论时，恢复正常工作：

if (json.token) {
    alert('WORKS!!');
    
    // await AsyncStorage.setItem('token',json.token);

    // userDispatch({
    //     type: 'setAvatar',//     payload: {
    //         avatar: json.data.avatar
    //     }
    // });

    // navigation.reset({
    //     routes:[{name:'Maintab'}]

    // });

} else {
    alert('Wrong email or password!');
}

src / contexts / UserContext.js

import React,{createContext,useReducer} from 'react';
import {initialState,UserReducer} from '../reducers/UserReducer';

export const UserContext = createContext();

export default ({children}) => {
    const [state,dispatch] = useReducer(UserReducer,initialState);

    return (
        <UserContext.Provider valule={{state,dispatch}}>
            {children}
        </UserContext.Provider>
    );
};

我是本机响应的新​​手，所以我会缺少什么吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）