getStaticProps 返回未定义

问题描述 投票:0回答:1

我正在使用 NextJs 13 和 Strapi,我想使用 getStaticProps 制作一个 Menu.js 组件。

我在 _app.js 中创建了一个添加的 Layout 组件。 以及 Layout 中的 Menu 组件。

我测试了 getStaticProps 中的代码,它返回了预期的 json 响应。

_app.js

import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.css'
import Layout from './components/Layout'

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

Layout.js

import Menu from './Menu'
import Footer from './Footer'

export default function Layout({ children}) {

  return (
    <>
      <Menu />
      <main>{children}</main>
      <Footer />
    </>
  )
}

菜单.js

const Menu = async ({ dataMenu }) => {

  console.log(dataMenu);

  const renderMenuItems = (items) => {
    return items.map((item) => (
      <li key={item.id}>
        <Link href={item.attributes.url}>
          <a>{item.attributes.title}</a>
        </Link>
        {item.attributes.children.data.length > 0 && (
          <ul>{renderMenuItems(item.attributes.children.data)}</ul>
        )}
      </li>
    ));
  };

  return (
    <nav>
      <ul>{renderMenuItems(dataMenu)}</ul>
    </nav>
  );
};

export async function getStaticProps() {
  const urlParamsObject = {
    nested: "",
    populate: "*",
  }
  const queryString = qs.stringify(urlParamsObject);
  const { data } = await api.get(`/menus/1${queryString ? `?${queryString}` : ""}`);
  const dataMenu = data.data;

  return { props: { dataMenu } };
}

当我尝试 console.log() 我未定义的 dataMenu 数据时。

有人能告诉我为什么我期待这个问题吗? 谢谢。

javascript next.js nextjs13
1个回答
0
投票

只有页面可以导出getStaticProps、serverSideProps等not组件。

查看此答案以获取解决方法

© www.soinside.com 2019 - 2024. All rights reserved.