NextJS中GetStaticProps返回数据后调用map函数报错求助

问题根源 #

1. 在getPostDataByCategory函数中，你将filter返回的一维数组push到了空数组里，导致filteredPosts变成了二维数组（格式类似[[post1, post2]]），最后返回的是包含这个二维数组的对象{filteredPosts: [[...]]}。
2. 在getStaticProps中，你直接把整个返回对象赋值给了filteredPosts，传给组件后，组件接收的filteredPosts要么是对象，要么是二维数组，都无法直接调用map方法。

最简单的两种解决方式 #

方式一：让函数直接返回一维数组

修改lib/posts.js中的getPostDataByCategory函数：

getPostDataByCategory(category) {
  const fileNames = fs.readdirSync(postsDirectory);
  // 保留你原有的allPostsData解析逻辑
  const allPostsData = fileNames.map((fileName) => {
    ...
  });
  // 直接将filter结果赋值给filteredPosts，避免生成二维数组
  const filteredPosts = allPostsData.filter((post) => post.categories.includes(category));
  // 直接返回数组，而非包含数组的对象
  return filteredPosts;
}

然后修改categories/[categories].js中的getStaticProps：

export async function getStaticProps({ params }) {
  // 直接拿到一维数组
  const filteredPosts = await getPostDataByCategory(params.categories);
  return {
    props: {
      filteredPosts,
    },
  };
}

组件代码无需修改，此时filteredPosts就是可直接map的一维数组。

方式二：保留函数返回对象，但修正数组结构并正确解构

如果不想改变函数的返回结构，先修正getPostDataByCategory中的数组赋值：

getPostDataByCategory(category) {
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames.map((fileName) => {
    ...
  });
  // 直接赋值filter结果，不要用push生成二维数组
  const filteredPosts = allPostsData.filter((post) => post.categories.includes(category));
  return { filteredPosts };
}

再修改getStaticProps，解构出里面的一维数组：

export async function getStaticProps({ params }) {
  // 解构拿到对象中的filteredPosts数组
  const { filteredPosts } = await getPostDataByCategory(params.categories);
  return {
    props: {
      filteredPosts,
    },
  };
}

组件代码同样无需修改，即可正常调用map。

额外说明 #

你之前用的JSON.parse(JSON.stringify(posts))完全没有必要，因为getPostDataByCategory返回的是普通对象/数组，直接使用即可，序列化再解析只会增加不必要的开销。

内容的提问来源于stack exchange，提问作者user2408378