使用反应上下文在混音反应中没有按预期工作？答案

【问题标题】：Using react context not working as expected in remix react?使用反应上下文在混音反应中没有按预期工作？
【发布时间】：2022-07-18 22:51:20
【问题描述】：

尽管在非混音项目中看到了这样的工作示例，但它似乎并没有像我实现它的方式那样工作？

我在root.tsx中有以下内容：

    export const MyContext = createContext("default");
    function Document({ children }: { children: React.ReactNode }) {
      return (
        <html lang="en">
          <head>
            <Meta />
            <Links />
          </head>
          <body className="root-body">
            <MyContext.Provider value="bonjour!">
              <Header />
            </MyContext.Provider>
            {children}
            <ScrollRestoration />
            <Scripts />
            <LiveReload />
            <Footer />
          </body>
        </html>
      );
    }

    export default function App() {
       return (
         <Document>
           <Outlet />
         </Document>
  );
}

在我的<Header/> 组件中，我有：

import { useContext } from "react";
import { MyContext } from "~/root";

    export const Header = () => {
              const result = useContext(MyContext);
              console.log(result);
              return(null)
              }

结果是"default" 被打印到控制台，但根据我的理解肯定应该是"bonjour"？

我哪里错了？

【问题讨论】：

标签： reactjs typescript react-context remix.run

【解决方案1】：

服务器控制台上的输出来自 Remix SSR。在服务器渲染期间似乎没有应用上下文。但是，它确实在水合作用后正确显示。不幸的是，它也会导致水合错误（请参阅浏览器控制台）。

无论如何，这看起来确实很奇怪。我的理解是你可以使用大多数 hooks 服务器端（useEffect 和 useLayoutEffect 除外）。

https://codesandbox.io/s/remix-react-context-mzexmt

【讨论】：