React Context API问题：无法覆盖Provider的值

我正在尝试编写一个带有自身Context的可复用React组件，但卡在了一个看似基础的问题上。
在下方简化示例中，我在实例化ToastContext.Provider时重写了setMessage，但在下游调用context的setMessage时，触发的却是默认函数（会打印控制台日志），而非我期望的更新后的值。
我不确定这是React、NextJS的问题，还是（最有可能）我自身的问题。我承认这可能是重复问题，但一整天都没找到有用的相关帖子。

控制代码

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 SomeControl = ({ children }: any) => {
    const toastContext = useContext<ToastStore>(ToastContext)
    toastContext.setMessage('Here I am')!
    // 我期望“Here I am”显示在Toast组件的div中，但实际却触发了context默认值的控制台日志
}

问题原因 #

核心问题是直接在组件渲染阶段调用状态更新函数setMessage：

• 渲染阶段调用setMessage会触发组件重新渲染，形成无限循环，React为了避免崩溃可能会 fallback 到Context的默认值。
• 即使没有无限循环，首次渲染时Provider的上下文还未完全关联到子组件，也会优先使用默认实现。

修复方案 #

把状态更新逻辑放到useEffect钩子中，确保只在组件挂载或依赖变化时执行：

修改后的消费者代码 #

import { useContext, useEffect } from 'react'
import { ToastContext, ToastStore } from './ToastProvider'

export const SomeControl = ({ children }: { children?: React.ReactNode }) => {
    const toastContext = useContext<ToastStore>(ToastContext)

    useEffect(() => {
        // 组件挂载时调用一次setMessage
        toastContext.setMessage('Here I am')
    }, [toastContext])

    return <>{children}</>
}

额外优化：增强Context的错误提示 #

可以修改Context的默认值，添加明确的错误提示，方便排查未正确包裹Provider的情况：

export const ToastContext = createContext<ToastStore>({
    setMessage: (message: string) => { 
        console.error('错误：当前组件未被ToastProvider包裹，无法正确调用setMessage', message)
    }
})

内容的提问来源于stack exchange，提问作者Jason