生成动态站点地图时，slugs.map 不是函数错误答案

【问题标题】：slugs.map is not a function error when generating dynamic sitemap生成动态站点地图时，slugs.map 不是函数错误
【发布时间】：2023-03-25 04:37:01
【问题描述】：

我想根据我的 slugs 路径生成动态站点地图。我使用next-sitemap 库：https://github.com/iamvishnusankar/next-sitemap。

当我想输入http://localhost:3000/server-sitemap.xml时出现错误 slugs.map is not a function 在../pages/server-site.xml/index.js。

next-sitemap.config.js

module.exports = {
  siteUrl: "https://mywebsite.vercel.app/",
  changefreq: "daily",
  priority: 0.7,
  //   sitemapSize: 5000,
  generateRobotsTxt: true,
  exclude: ["/server-sitemap.xml"],

  robotsTxtOptions: {
    policies: [
      {
        userAgent: "*",
        allow: "/",
      },
    ],
    additionalSitemaps: [
      "https://mywebsite.vercel.app/server-sitemap.xml",
    ],
  },
};

../pages/server-site.xml/index.js

import { getServerSideSitemap } from "next-sitemap";
import { getPortfolioSlugs } from "../../lib/data";

export const getServerSideProps = async (ctx) => {
  // Method to source urls from cms
  const slugs = await getPortfolioSlugs();

  const fields = slugs.map((slug) => ({
    loc: `https://mywebsite.vercel.app/portfolio/${slug.slug}`,
    lastmod: new Date().toISOString(),
  }));

  return getServerSideSitemap(ctx, fields);
};

export default function Sitemap() {}

GraphQL 请求：

import { GraphQLClient, gql } from "graphql-request";
const endpoint = process.env.REACT_APP_GRAPHCMS_API;

export const getPortfolioSlugs = async () => {
  const graphQLClient = new GraphQLClient(endpoint);

  const query = gql`
    {
      portfolios {
        slug
      }
    }
  `;
  return await graphQLClient.request(query);
};

GraphCMS API Playground getPortfolioSlugs() 查询返回：

{
  "data": {
    "portfolios": [
      {
        "slug": "kostka-brukowa-test"
      },
      {
        "slug": "kostka-cypryjska"
      },
      {
        "slug": "granito"
      },
      {
        "slug": "carmino"
      },
      {
        "slug": "test-xxx"
      }
    ]
  }
}

在PortfolioList，我console.log(slugs)来自这个道具。

// (...)
export const getServerSideProps = async () => { 
  const slugs = await getPortfolioSlugs(); 
  return { props: { slugs: slugs.portfolios, }, }; 
}; 

const PortfolioList = ({slugs }) => {
  console.log(slugs);
return (
//(...)
)}
// (...)

【问题讨论】：

错误提示slugs不是数组（没有map方法）。如果将slugs 记录到终端，它会输出什么？
我不能console.log(slugs) 因为getServerSideProps 有很多错误，但在我的API Playground 中显示了getPortfolioSlugs 查询。我更新了问题，您可以检查它返回的内容。
我刚刚在我的其他页面中执行了 getPortfolioSlugs() 的 console.log，它重新运行 API Playground 所做的 - 对象数组
GraphQL 查询返回的数据是一个对象。在最后一张图片中，您究竟在控制台上记录了什么？
它有效！！！！谢谢，我学到了一些新东西。我对graphql和后端的东西等有点菜鸟。你可以用它来回答我的问题：）非常感谢！ :-)

标签： reactjs graphql next.js

【解决方案1】：

GraphQL 查询返回的数据是一个对象，因此当您尝试在 slugs 上调用它时，会出现关于 .map 不是函数的错误。

您要映射的数组应该可以在slugs.portfolios 下访问。

// /pages/server-site.xml/index.js
export const getServerSideProps = async (ctx) => {
    const slugs = await getPortfolioSlugs();
    // Change following line
    const fields = slugs.portfolios.map((slug) => ({
        loc: `https://mywebsite.vercel.app/portfolio/${slug.slug}`,
        lastmod: new Date().toISOString(),
    }));

    return getServerSideSitemap(ctx, fields);
};

【讨论】：