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>
  );
};

知道为什么吗？

Answer 1

当您在Layout之外使用时，useContext提供一个空对象的假设确实是正确的。如果层次结构中没有Provider，则useContext返回提供给React.createContext的默认值

此外，您只能在功能组件开始时使用React hooks，而不能在渲染中使用。因此，如果您像下面那样编写代码，则可以正确记录上下文值

const Content: React.FunctionComponent = () => {
   const content = React.useContext(DataContext);
   console.log(content);
   return (
      <div>Content</div>
   )
}
const Home: React.FunctionComponent = () => {

  return (
    <Layout>
      <Content />
    </Layout>
  );
};

Working demo

Answer 2

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>

Answer 3

好吧，我遇到了同样的问题，经过大量谷歌搜索后，我发现每当我们的页面刷新时，它都会将上下文值设置为默认值。

因此，如果您使用标签或类似的东西进行导航或刷新页面的东西，请使用 react-router-dom 中的标签或代替。

这对我有用。

useContext（）反应挂钩未返回正确的值

3 个答案: