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

知道為什么嗎？

Answer 1

useContext將從樹上最接近它的Provider獲取value 。 您的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 2

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

工作演示

Answer 3

好吧，我面臨着同樣的問題，經過大量的谷歌搜索后，我發現每當我們的頁面刷新時，它都會將上下文值設置為默認值。

因此，如果您使用標簽或類似的東西進行導航或刷新頁面的東西，請使用 react-router-dom 中的標簽或代替。

這對我有用。