React Context API-一个提供者，多个消费者

Question

我正在尝试习惯React的Context API功能，我正在尝试在两个其他组件中使用一个组件中提供的上下文。不幸的是，当尝试访问第二个上下文使用者中的上下文时，上下文的值为undefined。我该如何解决这个问题？

Provider (snippet):

const [loginState, changeLoginState] = useState({
isAuthenticated: false,
login: () => {}
});
const loginHandler = () => {
let newState = {...loginState};
newState.isAuthenticated = true;
changeLoginState(newState);
};
return (
<div className={CSSmodule.App}>
<AuthContext.Provider value = { {
isAuthenticated: loginState.isAuthenticated,
login: loginHandler
} }>
<Cockpit 
showValuesState = {showValuesState}
showContent = {showContent}
personsStateLength = {personsState.length}/>
</AuthContext.Provider>
);

Consumer 1 (works):

<AuthContext.Consumer>
{
(context) => {
console.log("[Cockpit.js]", context);   
return (
<button
onClick = {context.login}>
Login
</button>
); 
}
}
</AuthContext.Consumer>

Consumer 2 (context value is undefined):

<AuthContext.Consumer>
{
(context) => {
console.log("[from Person.js]", context);
if(context.isAuthenticated)
return (<p>Authenticated!</p>);
}
}
</AuthContext.Consumer>

Imported AuthContext component from context.js:

import React from "react";
const context = React.createContext();
export default context;

Answer 1

上下文仅对后代可用

上下文共享的工作方式是，所有需要访问上下文的组件数据必须封装在单个提供程序中。

<Context.Provider value={}>
<App/>
</Context.Provider>

在上面的代码段中，App是最顶端的组件。层次结构为：

App
|-- Home
|-- About

现在Home和About可以访问上下文中的值。

---

在您的代码中，Person.js可能没有被呈现为<AuthContext.Provider>的后代，因此它无法访问它；附上"；消费者。来自文档：

Context旨在共享React组件树的"全局"数据[…]