React 上下文 API - 一个提供者，多个消费者

Question

我正在努力适应 React 的上下文 API 功能，而我正在尝试做的是在其他 2 个组件中使用一个组件中提供的上下文。不幸的是，当尝试访问第二个上下文使用者中的上下文时，context 的 value 是 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> 的后代，因此它无法访问它。换句话说，提供者应该“包围”消费者。 From the docs:

Context is designed to share data that can be considered “global” for a tree of React components [...]

React 上下文 API - 一个提供者，多个消费者

React Context API - One provider, multiple consumers

javascript

reactjs

react-context

上下文仅对其后代可用