我正在尝试编写一个可重用的React组件，使用自己的context，我被一些看起来相当初级的东西卡住了。
在下面的简化示例中，我在示例化ToastContext.Provider时调用了setMessage。然而，当我尝试在下游调用上下文的setMessage时，我得到的是被调用的默认函数（显示控制台日志），而不是我希望得到的更新值。
我不确定这是一个React的东西还是一个NextJS的东西，或者（很可能）一个PIBCAM的东西。我完全承认这可能是一个骗局，但我已经找了一整天的帖子，没有运气。

控制代码

export interface ToastStore {
    setMessage: (message: string) => void
}

export const ToastContext = createContext<ToastStore>({
    setMessage: (message: string) => { console.log(`Incorrectly trying to set message here: ${message}`) }
})

export function ToastProvider({ children }: { children?: ReactNode }) {
    const [message, setMessage] = useState('Not Set')
    return (
        <>
            <ToastContext.Provider value={{setMessage}}>
                <div>Toast: {message}</div>
                {children}
            </ToastContext.Provider>
        </>
    )
}

字符串

**消费者 （{children}的一部分开始注入控制器）

export const Some Control = ({ children }: any) => {
    const toastContext = useContext<ToastStore>(ToastContext)
    toastContext.setMessage('Here I am')!
    // ^ I would expect "Here I am" to show up in the Toast component's div, but instead
    // I get the console log message from the context's default value

型