getStaticProps 返回的 props 数组中出现不需要的空值

【问题标题】：Unwanted nulls appear in props array returned by getStaticPropsgetStaticProps 返回的 props 数组中出现不需要的空值
【发布时间】：2022-06-15 01:21:06
【问题描述】：

我有一个 [page].js，我在其中使用 getStaticPaths 形成路径，从 getStaticProps 中的 Firebase 获取数据，并将 props 数组传递给我的组件。但是当我读取组件内的 props 数组时，它会向其推送不需要的空值。

[页面].js

  export async function getStaticPaths() {
  //form paths
  return {
      paths: paths,
      fallback: false,
    };
  }

  export async function getStaticProps({ params }) {
      let arr = [];
      //form props
      console.log(arr) // [1, 2, 3]
      return { props: { arr } };
  }

  export default function Page({ arr }) {
      console.log(arr) // [1, 2, 3, null, null]
      return arr.map((i) => {
          return <div>{i}</div>;
      })
  }

Console log of arr inside of the Page component

如果我在页面组件中手动定义数组而不传递任何道具，它会很好地工作。我读到它可能是由自定义 _app.js 引起的，所以这里也是。

_app.js

import '../styles/globals.css';
import 'normalize.css/normalize.css';
import Layout from '../components/layout';

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

//I tried to add this but had no luck
// App.getStaticProps = async (appContext) => {
//   let pageProps = {};
//   if (appContext.Component.getInitialProps) {
//     pageProps = await appContext.Component.getStaticProps(appContext.ctx);
//   }
//   return { ...pageProps };
// };

export default App;

提前感谢您的帮助！

【问题讨论】：

• 来自Page()的调用者。

标签： javascript next.js