是否有一种方法来改变一个孩子的useContext值，使其他孩子得到改变的值?

Question

基本上就是这样，有没有一种方法可以让父组件创建一个具有默认值(例如null)的上下文，然后在其中一个子组件中修改该值，因此当另一个子组件使用该上下文时，它现在更改为该值?

E。g:我们有一个App.jsx文件，创建一个userContext并包装应用程序，然后在Login.jsx文件组件中，我们将userContext更改为实际用户(就像我们正在登录一样)，然后在Dashboard.jsx文件中，我们查看该用户的数据(就像他已经登录一样)。

我有这个问题，因为我已经尝试过了，Dashboard.jsx组件只是从App.jsx文件中获取userContext，而不是那个上下文，而是用户数据，在Login.jsx

中更改提前谢谢你

Answer 1

您可以将上下文设置为可修改的状态值。这里我们设置了一个具有user和setUser值的上下文对象。然后，我们可以从登录页面调用setUser来更新上下文值。

export const UserContext = createContext();
export const App = () => {
const [user, setUser] = useState();
const context = useMemo(() => ({user, setUser}), [user]);
return <context.Provider value={context}>...</context.Provider>
}
export const Login = () => {
const ctx = useContext(UserContext);
// do this as appropriate in a useEffect or whatever
// this will update the root context's value
ctx.setUser(someUser);
}