消费者未阅读提供商价值

Question

这是我的提供程序组件

import React, {useState} from 'react';
import MyComponent from './MyComponent/MyComponent';

     export default function App(props) {
    const [header, setHeader] = useState(null);

    function setHeaderText(header) {
        setHeader(header);
    }

    const contextItems = {
        setHeaderText: setHeaderText,
        what: 'what'
    };

    return <React.Fragment>
        <AppContext.Provider value={contextItems}>
            <MyComponent request={props.request}/>
        </AppContext.Provider>
    </React.Fragment>

}

export const AppContext = React.createContext({
    setHeaderText: () => {},
    what: ''
});

我正在使用使用者尝试将上下文值传递给作为功能组件的MyComponent。

function MyComponent() {...}

export default (props) => {
    return <AppContext.Consumer>
        { value => <MyComponent context={value} {...props} />}
    </AppContext.Consumer>
}

我的问题是，它仅传递AppContext的默认值，而不传递我传递的值。

有人能看到我的代码有什么问题吗？

我正在使用最新版本的react 16.8.2。

感谢您的帮助。

旁注：我知道我可以在这种情况下使用合成，但是标题值将在整个应用程序中使用。