你好，我有一个上下文，我试图从一个提供者传递给一个消费者。它是完美的工作，但突然停止工作。这里是我的代码的一个例子。
我有一个名为AppContext.tsx的文件，它是应用程序的根，由index.js呈现
tsx包含以下代码。

import * as React from 'react';
import { App } from './App';

interface iHigherStateOfContextProps {
username: string;
}

export const higherStateOfContext = React.createContext({} as iHigherStateOfContextProps);

interface IAppContextProps {}

interface IAppContextState {
userName: string;
}

export class AppContext extends React.Component<IAppContextProps, IAppContextState> {
    constructor(props: IAppContextProps) {
    super(props);
        this.state = {
userName:"Some Name"
}

    render() {
        return (<div>
            <higherStateOfContext.Provider value={{
                userName: this.state.userName;
            }}>
                <App />
            </higherStateOfContext.Provider>

        </div>
           
        );
    }
}

树中更靠下的使用者，我们将其称为TopBar.tsx，导出的Navigation元素从AppContext呈现的App.Tsx中调用。tsx的编码如下......
所以App.tsx看起来像这样......

import * as React from 'react';
import TopNavigation from './components/Navigation/TopBar';

export const App = function (props: {  }) { 
    const [appTitle, setAppTitle] = useState<string>("App Name");
    useEffect(() =>
    {
   }, []); 

        return (
            <div>
               {appTitle}
                <TopNavigation />
               
            </div>
        );
    //}
}

这是导入的导航/TopBar. tsx中的代码。

import * as React from 'react';
import { higherStateOfContext } from '../../AppContext';
const Navigation = () => {
    return (
    <higherStateOfContext.Consumer>
        {({  userName }) => (

            <TopBar userName={userName} />
        )}
    </higherStateOfContext.Consumer>

);
}

export default Navigation;

interface ITopBarProps {
    userName: string;

}

interface ITopsBarState {

}

class TopBar extends React.Component<ITopBarProps, ITopsBarState>   {

    constructor(props: ITopBarProps) {
        super(props);

        this.state = { };

 render() {
        return (<div>{this.props.userName}</div>); // <----- This is undefined
}
}

这个问题是，在TopBar.tsx中，消费者从AppContext提供程序返回undefined，因此不会呈现。