Хук перехватки useContext () не возвращает правильное значение - PullRequest
Новая
       7

Хук перехватки useContext () не возвращает правильное значение

0 голосов
/ 19 февраля 2019

Я обертываю свой компонент 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>
  );
};

Я хотел бы использовать хук useContext в моем компоненте Home, но он возвращает пустой объект: 

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

Есть идеи почему?

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

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>
0 голосов
/ 19 февраля 2019

Ваша гипотеза о том, что useContext предоставляет пустой объект при использовании вне Layout, действительно верна.Если в иерархии нет 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>
  );
};

Рабочая демонстрация

...