useContext() 反应钩子没有返回正确的值

Question

我将 Home 组件包装在以下布局中：

 export const DataContext = React.createContext({});

const Layout: React.FunctionComponent = (props) => {
  const data = {title: "abc", description: "def"};

  return (
    <DataContext.Provider value={data}>
        {props.children}
    </DataContext.Provider>
  );
};

我想在我的 Home 组件中使用 useContext 钩子，但它返回一个空对象：

 const Home: React.FunctionComponent = () => {
  const content = React.useContext(DataContext);

  return (
    <Layout>
       // content data goes here
    </Layout>
  );
};

我怀疑这是因为我在 Layout 包装器之外定义了上下文变量，它包含上下文提供程序，所以它回落到我定义的上下文的默认值（一个空对象）。但是，即使我在布局提供程序中控制台记录 useContext 挂钩，它也会返回一个空对象：

 const Home: React.FunctionComponent = () => {
  const content = React.useContext(DataContext);

  return (
    <Layout>
      {console.log(React.useContext(DataContext))}
    </Layout>
  );
};

知道为什么吗？

原文由 Aiwatko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

useContext 将从最接近树的 value Provider 。你的 Layout 在里面 Home ，这将使 Provider 在它下面的树中。

你可以让 Home Layout 孩子，而不是看到它工作。

例子

 const DataContext = React.createContext({});

const Layout = props => {
  const data = { title: "abc", description: "def" };

  return (
    <DataContext.Provider value={data}>{props.children}</DataContext.Provider>
  );
};

const Home = () => {
  const content = React.useContext(DataContext);

  return <div>{JSON.stringify(content)}</div>;
};

function App() {
  return (
    <Layout>
      <Home />
    </Layout>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

原文由 Tholle 发布，翻译遵循 CC BY-SA 4.0 许可协议