从 json（创建的服务器端，Nextjs）获取的菜单项不会出现在 HTML 源代码中-解网

问：

对不起，如果标题不是很清楚。我试着解释自己：我的网站是用Next.js构建的，并从 Sanity Studio （CMS）检索数据。在 Sanity 中，用户可以创建菜单项。我在页脚组件中有一个菜单，一个在侧边栏组件中，另一个在页眉组件中。问题是，我只能在页面中获取理智。因此，我创建了一个函数，该函数在每次构建时都会创建一个 JSON，其中包含用户输入的所有信息。接下来，为了让菜单项遍布整个网站，这个 JSON 被导入到“Layout”组件中，并存储在特定的 react 上下文中。一切正常。但我注意到一件事：如果我查看页面的源代码，菜单如下所示：

<nav>
<ul></ul>
</nav>

即使它在 HTML 中完美呈现。我想这是因为我生成了JSON服务器端，并且在创建页面时该信息不可用。

有什么想法吗？

谢谢

编辑：这是我导入JSON文件的布局组件

import styles from '@styles/components/Layout.module.css';
import React from 'react';
//other imports...

//imported JSON
import globalData from '@client/global-manifest.json';

//this is the normalize function
import { normalizeNavigationFromRaw } from '@utils/normalizeNavigation';

//this is the navigation normalized
const navigationData = normalizeNavigationFromRaw(globalData?.navigation ?? {});


export default function Layout({ children }: { children: React.ReactElement }) {
  // some functions for open/close modal ...

  //context method to store navigation
  const { setNavigation } = React.useContext<any>(GlobalSettingsContext);


  //store navigation in context
  React.useEffect(() => {
    setNavigation(navigationData);
  }, []);

  return (
    <>
      <Head>
        // some head code

      </Head>
      
      <main className={styles.container}>
        <HeaderWrapper
          toggleMenu={toggleMenu}
          toggleContactPanel={toggleContactPanel}
        />
        <SidebarMenu
          isOpenMenu={isOpenMenu}
          toggleMenu={toggleMenu}
          ref={sideMenuRef}
        />
        <ContactPanel
          isOpenContact={isOpenContact}
          toggleContactPanel={toggleContactPanel}
          ref={panelRef}
        />
        {children}
      </main>
      <Footer />
    </>
  );
}

其他涉及的组件只有从 useContext 导入并使用的导航上下文。例如页脚：

import * as React from 'react';
//other imports...

import { GlobalSettingsContext } from '@contexts/GlobalSettings';

export default function Footer(): React.ReactElement {
  const { navigation } = React.useContext(GlobalSettingsContext);

  return (
    <footer
      className={
        isSingleVehiclePage
          ? `${styles.footer} ${styles.morePadding}`
          : styles.footer
      }
    >
      <LayoutContainer>
        <div className={styles.secondary}>
          <div className={styles.social}>
            {navigation.footerSocialIcon &&
              navigation.footerSocialIcon.map((el: any, mainKey: number) => (
                <Link key={mainKey} to={el.titleLink ?? ''}>
                  <span className={`icon-${el.iconClass ?? ''}`}></span>
                </Link>
              ))}
          </div>
        </div>
      </LayoutContainer>
    </footer>
  );
}

JavaScript ReactJS next.js 服务器端

嗨，我没有添加代码，因为我不知道要添加代码的哪一部分。我的意思是，在 Layout 组件中，我通过常规导入在构建时导入了服务器端创建的 json 文件：import globalData from '@client/global-manifest.json';并将其存储在上下文中。它在每个页面中都正确呈现，但在源代码中，html 标记 <ul> 为空。仅当点击“检查源页面”时;在呈现的页面中，我看到了列表项。这只是SEO的问题。

0赞 Manuel Herrera 1/6/2022

我坚持要看代码（涉及的所有“组件”）。有些东西不起作用，所以你说你所做的很可能不是代码实际在做什么。从你告诉我的内容来看，我只能猜测，根据当前的描述，我的猜测是，通过使用 react 上下文，你在冻结后注入了 JSON，这意味着它不会出现在源代码中。

0赞 user16469315 1/6/2022

好的，谢谢你。我在 Layout 组件中添加了导航的相关代码。

0赞 Manuel Herrera 1/6/2022

如果您使用 or 函数添加组件的片段，我可以给出更详细的答案pagegetStaticPropsgetServerSideProps

答：

1赞 Manuel Herrera 1/6/2022 #1

根据提供的描述，我假设您正在使用 .（尽管这基本上是相同的问题getStaticPropsgetServerSideProps)

为了在html中预渲染获取的数据，您需要将其作为props传递，并从.\返回getStaticProps

您正在做的是将数据传递到反应上下文，该上下文在水化发生后呈现。
我建议你回顾一下 nextjs 的基础知识，了解哪些代码在客户端中执行，哪些代码在服务器中执行，以及预渲染的工作原理。请检查 https://nextjs.org/docs/basic-features/pages

使用上下文中的数据的组件位于 Layout 组件中。Layout 组件是一个包装器，它位于 _app 文件中。_app 文件返回：<GlobalSettingsProvider> <Layout> <Component {...pageProps} /> </Layout> </GlobalSettingsProvider>我尝试在_app中使用 getStaticProps，但我无法使用上下文。我尝试通过 props 将数据从 _app 传递到 Layout，然后将其存储在 Layout 组件内的上下文中;源头中仍然一无所有。而且我只能在页面中使用 getStatiProps，而不是在页脚或页眉组件中（我需要来自 sanity 的数据）

1赞 juliomalves 1/8/2022

@user16469315 问题在于您正在从仅在客户端运行的内部将数据设置到上下文中。而是将数据直接传递到的提供程序值中。useEffectGlobalSettingsContext

0赞 user16469315 1/8/2022

@juliomalves 非常感谢伙计，它有效！！

上一个：Ag-grid 服务器端分页，客户端排序和过滤

下一个：我应该从节点（服务器端）还是在 react（客户端）调用 api？

从 json（创建的服务器端，Nextjs）获取的菜单项不会出现在 HTML 源代码中

Menu items get from json (created server side, Nextjs) don't appear in HTML source code

评论

评论