Javascript React:TypeError:\u useContext未定义

我正在试着打字并做出反应。我有一个功能组件（下面的代码），应该使用

useContext

的上下文，但它向我显示了一个奇怪的错误，我找不到解决方案

如果我不使用TS，而使用JSX，它就可以正常工作

编辑：截图>

代码：

AppProvider.tsx

import React，{useState，useffect}来自“React”；
//应用程序的上下文（用于一般应用程序范围的使用）
const-AppContext:any=React.createContext（null）；
//这将在下面我们将导出的组件中使用
export const AppContextProvider=AppContext.Provider；
导出常量AppProvider:React.FC=（道具：任意）=>{
const[appName，setAppName]=useState（“献血”）；
const[appUser，setAppUser]：any=useState（null）；
const[appInfoBusy，setAppInfoBusy]=useState（false）；//正在获取或设置数据
useffect（（）=>{
getAppInfo（）；
}, []);
常量getAppInfo=（）=>{
设置超时（（）=>{
setAppName（“测试”）；
setAppUser({
名称：“管理员”，
电子邮件：“test@test.com",
角色识别号：100
});
}, 3000);
};
返回(
{props.children}
);
};

消费者：Login.tsx

import React，{useState，useffect，useContext}来自“React”；
进口{
按钮
卡片
高程
FormGroup，
输入组，
抽屉
班级，
H4，
标注，
H5
}来自“@blueprintjs/core”；
//@ts忽略
从“react google ReCAPTCHA”导入ReCAPTCHA；
从“../../assets/images/logo.png”导入徽标；
导入“../../scss/Login.scss”；
从“../../shared/Info”导入{RecaptchaKey}”；
从“../../shared/context/AppProvider”导入{AppContextProvider}”；
const Login:React.FC=props=>{
const[email，setEmail]：React.ComponentState=useState（）；
const[password，setPassword]：any=useState（）；
常量[isOpen，setIsOpen]：any=useState（）；
const[resetEmail，setResetEmail]：any=useState（）；
const[emailSent，setEmailSent]：any=useState（）；
const[captchaOk，setCaptchaOk]：any=useState（false）；
const[working，setWorking]：any=useState（false）；
//上下文
const{appName，appUser，appInfoBusy}=useContext（AppContextProvider）；
/**
*处理生命周期挂钩
*/
useffect（（）=>{
//安装组件时
}, []);
/**
*处理验证码更改
*@param值
*/
常量RECAPTCHACHACHACHANGE=（值：任意）=>{
setCaptchaOk（值？真：假）；
};
const handleRecoverySubmit=（）=>{
设置工作（真）；
设置超时（（）=>{
setEmailSent（true）；
设置工作（假）；
}, 3000);
};
返回(
…为简洁起见删除。。。
);
};
导出默认登录；

---

我们衷心感谢您的帮助。React和依赖项都是最新的。

我使用的是上下文提供程序，而不是

useContext（）

中的上下文本身，我应该使用

useContext（AppContext）

注释已删除，因为堆栈溢出

import React, { useState, useEffect } from "react";

// Application's context (for general application-wide usage)
const AppContext: any = React.createContext(null);

// this will be used below in the componet we will export
export const AppContextProvider = AppContext.Provider;

export const AppProvider: React.FC = (props: any) => {
  const [appName, setAppName] = useState("Blood Donation");
  const [appUser, setAppUser]: any = useState(null);
  const [appInfoBusy, setAppInfoBusy] = useState(false); // working to get or set data

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

  const getAppInfo = () => {
    setTimeout(() => {
      setAppName("Test");
      setAppUser({
        name: "Admin",
        email: "test@test.com",
        role_id: 100
      });
    }, 3000);
  };

  return (
    <AppContextProvider
      value={{
        appName: appName,
        appInfoBusy: appInfoBusy,
        appUser: appUser
      }}
    >
      {props.children}
    </AppContextProvider>
  );
};

import React, { useState, useEffect, useContext } from "react";
import {
  Button,
  Card,
  Elevation,
  FormGroup,
  InputGroup,
  Drawer,
  Classes,
  H4,
  Callout,
  H5
} from "@blueprintjs/core";
//@ts-ignore
import ReCAPTCHA from "react-google-recaptcha";

import logo from "../../assets/images/logo.png";
import "../../scss/Login.scss";
import { RecaptchaKey } from "../../shared/Info";
import { AppContextProvider } from "../../shared/context/AppProvider";

const Login: React.FC = props => {
  const [email, setEmail]: React.ComponentState = useState();
  const [password, setPassword]: any = useState();
  const [isOpen, setIsOpen]: any = useState();
  const [resetEmail, setResetEmail]: any = useState();
  const [emailSent, setEmailSent]: any = useState();
  const [captchaOk, setCaptchaOk]: any = useState(false);
  const [working, setWorking]: any = useState(false);

  // context
  const { appName, appUser, appInfoBusy } = useContext(AppContextProvider);

  /**
   * Handles lifecycle hooks
   */
  useEffect(() => {
    // when component is mounted
  }, []);

  /**
   * Handles Captcha change
   * @param value
   */
  const recaptchaChange = (value: any) => {
    setCaptchaOk(value ? true : false);
  };

  const handleRecoverySubmit = () => {
    setWorking(true);
    setTimeout(() => {
      setEmailSent(true);
      setWorking(false);
    }, 3000);
  };

  return (
    <div id="loginPage">
      ... removed for brevity ...
    </div>
  );
};

export default Login;