从子组件更新React上下文

Question

我无法从子组件更新上下文对象。这是我用于创建react上下文的提供商文件，该组件被封装在整个应用程序的根app.tsx文件中。

我可以在子组件中获取上下文但我不知道如何更新它。

const CorporateContext = React.createContext(undefined);
export const useCorporateContext = () => {
return useContext(CorporateContext);
};
export const CorporateProvider = ({ children }) => {
const [corporateUserData, setCorporateUserData] = useState(undefined);
useEffect(() => {
const localStorageSet = !!localStorage.getItem('corporateDetailsSet');
if (localStorageSet) {
setCorporateUserData({corporateId: localStorage.getItem('corporateId'), corporateRole: localStorage.getItem('corporateRole'), corporateAdmin: localStorage.getItem('corporateAdmin'), corporateSuperAdmin: localStorage.getItem('corporateSuperAdmin')});
} else {
(async () => {
try {
const json = await 
fetchCorporateUserDetails(getClientSideJwtTokenCookie());
if (json.success !== true) {
console.log('json invalid');
return;
}
setCorporateUserData({corporateId: json.data.corporate_id, corporateRole: json.data.corporate_role, corporateAdmin: json.data.corporate_role == 'Admin', corporateSuperAdmin: json.data.corporate_super_admin});
addCorporateDetailsToLocalStorage(corporateUserData);
} catch (e) {
console.log(e.message);
}
})();
}
}, []);
return (
<CorporateContext.Provider value={corporateUserData}>
{children}
</CorporateContext.Provider>
);
};
export default CorporateProvider;

更新:以下是我改变的内容，上下文似乎更新了(至少当我检查chrome devtools时它看起来更新了)，但子组件没有重新渲染，一切仍然保持不变:

我把react context改成:

const CorporateContext = React.createContext({
corporateContext: undefined,
setCorporateContext: (corporateContext) => {}
});

更改组件中的useState钩子:

const [corporateContext, setCorporateContext] = useState(undefined);

将setState作为属性传递给context:

<CorporateContext.Provider value={{corporateContext , setCorporateContext}}>
{children}
</CorporateContext.Provider>

Answer 1

您还可以将setCorporateUserData作为第二个值传递给提供商组件，如下所示:

//...
return (
<CorporateContext.Provider value={{corporateUserData, setCorporateUserData}}>
{children}
</CorporateContext.Provider>
);

您可以在任何时候使用useContext钩子将其解构。

Answer 2

如何解决这个问题:

问题是我已经克隆了corporateContext对象并更改了该克隆对象的属性，然后我将其传递给setCorporateContext()方法。结果，上下文被更新了，但是react没有注意到变化，子组件也没有更新。

let newCorporateContext = corporateContext;
newCorporateContext.property = newValue;
setCorporateContext(newCorporateContext);

之后，我使用javascript扩展操作符来改变setCorporateContext()方法中的corporateContext属性。

setCorporateContext({...corporateContext, property: newValue);

之后，react注意到钩子和子组件的变化被重新渲染!