React Context值始终为默认值未更新 异步更新后不生效问题求助

你在CorporateProvider内部定义的details状态，仅会在组件首次渲染时使用传入的value作为初始值。后续父组件CorporateWrapper拉取数据后更新了传入的value，但useState初始化逻辑不会重复执行，导致CorporateProvider内部的details始终是首次传入的空对象，子组件消费的Context自然不会更新。

方案1：删除CorporateProvider内部冗余状态（更推荐） #

你已经在CorporateWrapper层维护了Context的状态值，不需要在Provider内部再额外套一层状态，直接透传即可，修改CorporateProvider代码如下：

import React, { useContext } from "react";

const CorporateContext = React.createContext({corporateId: null, corporateRole: null, 
corporateAdmin: null, corporateSuperAdmin: null});
const UpdateCorporateContext = React.createContext({});

export const useCorporateContext = () => {
    return useContext(CorporateContext);
};

export const useUpdateCorporateContext = () => {
    return useContext(UpdateCorporateContext);
};

export const CorporateProvider = ({ value, children }) => {
    // 移除内部冗余state，直接使用外层传入的value
    return (
        <CorporateContext.Provider value={value}>
            <UpdateCorporateContext.Provider value={() => {}}>
            {/* 如果你不需要在子组件中更新Context，可以直接删掉UpdateCorporateContext相关逻辑 */}
            {children}
            </UpdateCorporateContext.Provider>
        </CorporateContext.Provider>
    );
};

export default CorporateProvider;

如果后续不需要在子组件中更新Context的值，完全可以删掉UpdateCorporateContext相关的所有定义，简化代码。

方案2：监听传入value变化同步内部状态 #

如果你要保留CorporateProvider内部的状态能力，就需要新增useEffect监听传入的value变化，同步到内部state：

import { useEffect } from "react";

export const CorporateProvider = ({ value, children }) => {
    const [details, setDetails] = useState(value);
    // 新增监听逻辑，外层传入的value变化时同步更新内部状态
    useEffect(() => {
        setDetails(value);
    }, [value]);
    return (
        <CorporateContext.Provider value={details}>
            <UpdateCorporateContext.Provider value={setDetails}>
            {children}
            </UpdateCorporateContext.Provider>
        </CorporateContext.Provider>
    );
};

注意：方案2下如果子组件调用内部的setDetails更新Context值，会和外层CorporateWrapper维护的corporateContextDefaults状态不一致，除非有明确的子组件更新Context的需求，优先选方案1。

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