React/Next.js中如何在Context Provider外初始化Context状态？

我正在使用Next.js开发网站，采用Layout组件。我希望将Layout的子组件用Context Provider包裹，但需要在Layout组件内部、Provider外部初始化Context的状态。

以下是我的Context代码：

// at contexts/ParametrosContext.js

import { createContext, useState } from "react";

export const ParametrosContext = createContext({});

export const ParametrosProvider = ({ children }) => {

    const [parametros, setParametros] = useState({});

    function loadParametrosContext(parametrosObj) {
        setParametros(parametrosObj);
    }

    return (
        <ParametrosContext.Provider value={{ parametros, loadParametrosContext }}>
            { children }
        </ParametrosContext.Provider>
    )
}

我的Layout代码如下：

// at components/layouts/SiteLayout.js

import { ParametrosContext, ParametrosProvider } from "../../contexts/ParametrosContext";

export default function SiteLayout({ children }) {

    const { loadParametrosContext } = useContext(ParametrosContext);

    if (children.props.ConteudoSite.temParametros)
            loadParametrosContext(children.props.ConteudoSite.Parametros);

    return ( 
        <ParametrosProvider>
            <Header/>
            {
                children
            }
            <Footer/>
        </ParametrosProvider>
    )
}

运行后出现错误：TypeError: loadParametrosContext is not a function，请问有没有正确的实现方式？

问题核心是**SiteLayout组件本身不在ParametrosProvider的包裹范围内**，调用useContext(ParametrosContext)拿到的是初始化时的空对象{}，自然找不到loadParametrosContext方法。以下是两种可行的修正方案：

方案一：让Provider接收初始参数 #

修改Context代码，让ParametrosProvider支持传入初始状态参数：

// contexts/ParametrosContext.js
import { createContext, useState } from "react";

export const ParametrosContext = createContext({});

export const ParametrosProvider = ({ children, initialParametros = {} }) => {
    // 直接用传入的初始值初始化state
    const [parametros, setParametros] = useState(initialParametros);

    function loadParametrosContext(parametrosObj) {
        setParametros(parametrosObj);
    }

    return (
        <ParametrosContext.Provider value={{ parametros, loadParametrosContext }}>
            { children }
        </ParametrosContext.Provider>
    )
}

再修改Layout组件，渲染Provider时传入提取好的初始参数：

// components/layouts/SiteLayout.js
import { ParametrosProvider } from "../../contexts/ParametrosContext";
import Header from "./Header";
import Footer from "./Footer";

export default function SiteLayout({ children }) {
    // 从子组件props中提取初始化参数
    const initialParametros = children.props.ConteudoSite.temParametros 
        ? children.props.ConteudoSite.Parametros 
        : {};

    return ( 
        <ParametrosProvider initialParametros={initialParametros}>
            <Header/>
            {children}
            <Footer/>
        </ParametrosProvider>
    )
}

方案二：在Provider内部处理动态初始化 #

如果需要监听参数变化或支持异步加载场景，可以把初始化逻辑放到Provider内部：

// contexts/ParametrosContext.js
import { createContext, useState, useEffect } from "react";

export const ParametrosContext = createContext({});

export const ParametrosProvider = ({ children, parametrosToLoad }) => {
    const [parametros, setParametros] = useState({});

    function loadParametrosContext(parametrosObj) {
        setParametros(parametrosObj);
    }

    // 当传入的参数变化时自动初始化
    useEffect(() => {
        if (parametrosToLoad) {
            loadParametrosContext(parametrosToLoad);
        }
    }, [parametrosToLoad]);

    return (
        <ParametrosContext.Provider value={{ parametros, loadParametrosContext }}>
            { children }
        </ParametrosContext.Provider>
    )
}

对应修改Layout组件：

// components/layouts/SiteLayout.js
import { ParametrosProvider } from "../../contexts/ParametrosContext";
import Header from "./Header";
import Footer from "./Footer";

export default function SiteLayout({ children }) {
    const parametrosToLoad = children.props.ConteudoSite.temParametros 
        ? children.props.ConteudoSite.Parametros 
        : null;

    return ( 
        <ParametrosProvider parametrosToLoad={parametrosToLoad}>
            <Header/>
            {children}
            <Footer/>
        </ParametrosProvider>
    )
}

关键注意点 #

• 只有被Provider包裹的组件才能通过useContext拿到正确的上下文值，你的场景不需要让SiteLayout本身访问上下文，只需把初始化逻辑转移到Provider层面即可。
• 方案一更适合同步初始化场景，代码简洁；方案二更适合需要动态监听或异步加载的场景。

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