Javascript 未处理的拒绝（TypeError）：无法对属性'；setUser'；属于'；对象（…）（…）和#x27；因为它是未定义的

我试图在用户使用createContext和useContext登录后设置用户令牌。以下是我的代码：

import React, { useState, useContext, createContext } from 'react';
import FormErrors from '../../components/formErrors/formErrors';
import Button from '../../components/button/button'
import axios from 'axios';
import { useHistory } from 'react-router-dom'

export default function () {
    const AppContext = createContext();

    const history = useHistory();
    const {setUser} = useContext(AppContext);
    const [email, setEmail] = useState( '' );
    const [password, setPassword] = useState( '' );
    const [errors, setErrors] =  useState( [] );

    const onSubmit = async event => {
        event.preventDefault();
        setErrors( [] );
        let _errors = []

        if (!email) _errors.push('Email is required');
        if (!password) _errors.push('Password is required');

        if(_errors.length) return setErrors(_errors);

        try {
            const data = {
                email,
                password
            };

            const response = await axios.post('/api/user/login', data);
            setUser(response.data.user);
            localStorage.setItem("token", response.data.token);
            history.push('/');
        } catch (e) {
            setErrors([e.response.data.message]);
        }
        
    };

    return (
        <div className="page">
            <h1 className="page__title">
                Login
            </h1>

            <form onSubmit={onSubmit} className="form">
                {!!errors.length && <FormErrors errors={errors} />}
                <div className="form__group">
                    <label className="form__label">
                        Email 
                    </label>
                    <br></br>
                    <input type="text"
                    className="form__input form__group"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    placeholder="johndoe@mail.com"/>
                </div>
                <div className="form__group">
                    <label className="form__label">
                        Password 
                    </label>
                    <br></br>
                    <input type="password"
                    className="form__input form__group"
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                    placeholder="Password..."/>
                </div>

                <Button type="submit">Login</Button>
            </form>
        </div>
    )
}

import React，{useState，useContext，createContext}来自'React'；
从“../../components/FormErrors/FormErrors”导入FormErrors；
从“../../components/Button/Button”导入按钮
从“axios”导入axios；
从“react router dom”导入{useHistory}
导出默认函数（）{
const AppContext=createContext（）；
const history=useHistory（）；
const{setUser}=useContext（AppContext）；
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const[errors，setErrors]=useState（[]）；
const onSubmit=异步事件=>{
event.preventDefault（）；
setErrors（[]）；
让_errors=[]
如果（！email）_错误。推送（'需要电子邮件'）；
如果（！password）_出错。推送（'password is required'）；
if（_errors.length）返回setErrors（_errors）；
试一试{
常数数据={
电子邮件，
密码
};
const response=wait axios.post（'/api/user/login'，data）；
setUser（response.data.user）；
setItem（“token”，response.data.token）；
历史推送（“/”）；
}捕获（e）{
setErrors（[e.response.data.message]）；
}
};
返回(
登录
{！！errors.length&}
电子邮件



setEmail（e.target.value）}
占位符=”johndoe@mail.com"/>
密码



setPassword（e.target.value）}
占位符=“密码…”/>
登录
)
}

我不确定为什么无法在useContex中对属性“setUser”进行解构。我收到错误“未处理的拒绝（TypeError）：无法对对象（…）（…）的属性“setUser”进行分解，因为它未定义。请提供任何帮助。如果您也能给出一些详细的解释，那将非常有帮助。

问题

const AppContext=createContext（）需要出现在组件外部，并且组件需要包装在提供该上下文的提供程序中

解决方案
应用程序上下文

export const AppContext = createContext({
  setUser: () => {},
});

应用程序

const[user，setUser]=React.useState（）；
...
返回(
//
const [user, setUser] = React.useState();

...

return (
  <AppContext.Provider value={{ setUser }}> // <-- wrap app with provider can value
    <App />
  </AppContext>
);

import React, { useState, useContext, createContext } from 'react';
...
import { AppContext } from '../path/to/AppContext'; // <-- import context

export default function () {
  ...
  const {setUser} = useContext(AppContext); // <-- destructure should work now
  ...

  return (
    <div className="page">
      ...
    </div>
  )
}