找不到上下文Next Js

Question

import { createContext, ReactNode, useState } from 'react';
import { MenuItem } from '../interfaces/menu.interfaces';
import { TopLevelCategory } from '../interfaces/page.interface';

export interface IAppContext {
    menu: MenuItem[];
    firstCategory: TopLevelCategory;
    setMenu?: (newMenu: MenuItem[]) => void;
}


export const AppContext = createContext<IAppContext>({menu: [], firstCategory: TopLevelCategory.Courses});


export const AppContextProvider = ({ menu, firstCategory, children }: IAppContext & { children: ReactNode }): JSX.Element => {
    const [menuState, setMenuState] = useState<MenuItem[]>(menu);
    const setMenu = (newMenu: MenuItem[]) => {
        setMenuState(newMenu);
    };

    return <AppContext.Provider value={{ menu: menuState, firstCategory, setMenu }}>
        {children}
    </AppContext.Provider>;
}; 

我有这段代码，但它不想看到 AppContext 并且在错误中显示无法找到名称空间“AppContext”。TS(2503)

我不明白为什么上面创建时找不到AppContext，请帮助解决问题

这里

Answer 1

使用.tsx而不是.ts. 这应该可以解决问题。

如果您需要更多信息，请参阅 -使用 React 创建上下文时无法找到命名空间 'ctx' 错误 - typescript