Question

我正在尝试习惯 React 的 Context API 功能，并且我正在尝试做的是在 2 个其他组件中使用一个组件中提供的上下文。不幸的是，当尝试访问第二个上下文使用者中的上下文时，上下文 的值是 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 旨在共享可被视为 React 组件树的“全局”数据 [...]

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

1 个答案:

上下文仅对其后代可用