如何从 JSON 文件中获取数据？

Question

在一个项目的工作中，我使用 Next.js。 如何从 JSON 文件 ( mainMenu ) 获取数据并将其显示在屏幕上？ 我究竟做错了什么？

function MyApp({ Component, pageProps, props }) {
  const newProps = Object.entries(props)
  console.log(props)
  return (
    <>
      <Header />

      <div className="container">
        <nav className={styles.navbar}>
          <div className={styles.navbarInner}>
            <ul className={styles.navbarList}>
              {newProps.map((item) =>
                item.map((elem) => (
                  <li className={styles.navbarListItem}>
                    <Link href={`/${elem.url}`}>
                      <a className={styles.navbarListLink}>{elem.label}</a>
                    </Link>
                  </li>
                ))
              )}
            </ul>
            <Input />
          </div>
        </nav>
      </div>

      <Component {...pageProps} />
    </>
  )
}

MyApp.getInitialProps = async (ctx) => {
  const res = await axios.get(`${url}/global`)
  console.group(res)
  return { props: res.data }
}

export default MyApp

Answer 1

1. 在getInitialProps传递res.data.mainMenu而不是res.data 。
2. Object.entries和嵌套的map不是必需的，因为mainMenu是一个数组。

最终代码：

const MyApp = ({ Component, pageProps, mainMenu }) => (
  <>
    <Header />

    <div className="container">
      <nav className={styles.navbar}>
        <div className={styles.navbarInner}>
          <ul className={styles.navbarList}>
            {mainMenu.map(elem => (
              <li className={styles.navbarListItem}>
                <Link href={`/${elem.url}`}>
                  <a className={styles.navbarListLink}>{elem.label}</a>
                </Link>
              </li>
            ))}
          </ul>
          <Input />
        </div>
      </nav>
    </div>

    <Component {...pageProps} />
  </>
)

MyApp.getInitialProps = async () => {
  const res = await axios.get(`${url}/global`)
  return { mainMenu: res.data.mainMenu }
}

export default MyApp