Next.js .map不是Vercel部署的函数

通常，如果我在使用.map时出错，那是因为我使用该方法的数组不存在或根本不是数组

有时，我从fetch返回一个JSON对象，并尝试在该对象上使用.map，而不是对象内部的数组

这些都是新手犯的错误，而我是新手。但是，在下面的例子中，我确信我是在JSON对象内部的数组上调用.map

怎么做

因为以下代码在开发和应用程序中在本地工作

因为我使用console.log（albums）来确保我在一个数组上迭代

当我在Vercel上部署此next.js应用程序时，出现以下错误：

> Build error occurred
21:23:30    TypeError: albums.map is not a function
21:23:30        at getStaticPaths (/vercel/workpath0/.next/serverless/pages/albums/[id].js:306:16)
21:23:30        at processTicksAndRejections (internal/process/task_queues.js:97:5)
21:23:30        at async buildStaticPaths (/vercel/workpath0/node_modules/next/dist/build/utils.js:16:80)
21:23:30        at async Object.isPageStatic (/vercel/workpath0/node_modules/next/dist/build/utils.js:23:549) {
21:23:30      type: 'TypeError'
21:23:30    }
21:23:30    error Command failed with exit code 1.
21:23:30    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
21:23:30    Error: Command "yarn run build" exited with 1
21:23:32    Done with "package.json"

以下是此错误所指的页面：

import React from "react";
import { useQuery, useMutation, useQueryClient } from "react-query";
import Image from "next/image";
import { queryAlbum } from "../../api/albums/[id]";
import { queryAlbums } from "../../api/albums";
import Form from "../../../components/styles/Form";
import Button from "../../../components/styles/Button";
import Container from "../../../components/styles/AlbumsShow";

async function createPicture(pictureData) {
  const response = await fetch(`/api/pictures/create`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(pictureData),
  });
  const { picture } = response.json();
  return picture;
}

async function deletePicture(pictureId) {
  await fetch(`/api/pictures/delete`, {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(pictureId),
  });
}

export async function getStaticPaths() {
  const albums = queryAlbums();
  const paths = [];
  await albums.map((album) => {
    return paths.push({
      params: {
        id: album.id.toString(),
      },
    });
  });
  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const response = await queryAlbum(params.id);
  const data = await JSON.stringify(response);
  const initialAlbumData = await JSON.parse(data);
  return {
    props: {
      initialAlbumData,
    },
  };
}

export default function Album({ initialAlbumData }) {
 ...all the code for the component 
  );
}

以下是查询功能：

import { PrismaClient } from "@prisma/client";

export async function queryAlbum(albumId) {
  const prisma = new PrismaClient({ log: ["query"] });

  try {
    const album = await prisma.album.findUnique({
      where: {
        id: parseInt(albumId),
      },
      include: {
        pictures: true,
      },
    });
    return album;
  } catch (error) {
    return { error: error };
  } finally {
    prisma.$disconnect();
  }
}

export default async function answerQuery(req, res) {
  // get [id] from url
  const {
    query: { id },
  } = req;
  const album = await queryAlbum(id);
  res.json({ album: album });
}

以及：

关于我为什么选择导入queryAlbum和queryAlbum，这里有一个Git上的线程，我用它来编写代码：

---

查看导入，这些似乎是您创建的api。这些不是普通的方法，它们是http方法，可以通过http（http调用）使用

我正在使用

fetch

来使用各自的API

导出异步函数getStaticPaths（）{
const data=wait fetch（'/api/albums'）；
const albums=wait data.json（）；
常量路径=等待相册.map（（相册）=>{
返回路径推送({
参数：{
id:album.id.toString（），
},
});
});
返回{
路径，
后退：错误，
};
}
导出异步函数getStaticProps（{params}）{
const response=wait fetch（`/api/albums/${params.id}`）；
const data=wait response.json（）；
返回{
道具：{
初始化数据：数据，
},
};
}

我分两步解决了这个问题

首先，我在Git上找到了答案：。基本上，我所需要做的就是删除“巴别塔”配置。我真的不知道为什么这个答案有效。我会调查它并在这里发布更新

导致部署时出错的package.json：

{
  "name": "photo_album",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "prisma": "prisma",
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@prisma/client": "^2.13.1",
    "babel-plugin-styled-components": "^1.12.0",
    "next": "10.0.3",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-query": "^3.5.1",
    "styled-components": "^5.2.1"
  },
  "devDependencies": {
    "@prisma/cli": "^2.13.1"
  },
  "babel": {
    "presets": [
      "@babel/preset-react"
    ],
    "env": {
      "development": {
        "presets": [
          "next/babel",
          "@babel/preset-react"
          "next/babel"
        ],
        "plugins": [
          [

答案是：

{
  "name": "photo_album",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "prisma": "prisma",
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT",
    "postinstall": "prisma generate",
    "heroku-postbuild": "npm run build"
  },
  "dependencies": {
    "@prisma/client": "^2.13.1",
    "babel-plugin-styled-components": "^1.12.0",
    "next": "10.0.3",
    "react": "16.13.0",
    "react-dom": "17.0.1",
    "react-query": "^3.5.1",
    "styled-components": "^5.2.1",
    "@prisma/cli": "^2.13.1",
    "@babel/core": "^7.12.10",
    "@babel/preset-react": "^7.12.10"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@prisma/cli": "^2.13.1"
  }
}

第二步涉及将getStaticProps更改为getServerSideProps并删除GetStaticPath。 下面是getServerSideProps的外观：

export async function getServerSideProps(context) {
  const response = await queryAlbum(context.query.id);
  const data = await JSON.stringify(response);
  const initialAlbumData = await JSON.parse(data);

  if (!initialAlbumData) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      initialAlbumData,
    },
  };
}

---

我认为，应该将

/api/

下的api作为服务调用，您是作为methodYou

const albums=await queryabums（）调用的

is可能没有获得正确的数据，只需检查它的响应是什么line@Swaraj甘地：谢谢你的建议。当I console.log（albums）时，它返回一个albums数组。它可能什么都不是，但wait通常不应用于非异步函数<代码>.map是synchronous@Yaakov我同意。事实上，我只是在用尽了其他选择之后才加上“等待”，我只是开始随意地尝试。上面的代码在.map前面没有“wait”的情况下也可以工作。我非常喜欢这个建议。但是，next.js不接受getStatisPaths（）中的相对路径。您尝试过吗？我可以看到您使用了其他api

/api/pictures/create

，它可以工作吗？可以。不幸的是，next.js不接受GetStaticPath或getStaticProps中的相对路径。它将允许在我编写的其他函数中使用相对路径。你是对的。。你能分享

queryAlbum

和

queryAlbum

代码吗？当然！我刚把它们贴出来

{
  "name": "photo_album",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "prisma": "prisma",
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT",
    "postinstall": "prisma generate",
    "heroku-postbuild": "npm run build"
  },
  "dependencies": {
    "@prisma/client": "^2.13.1",
    "babel-plugin-styled-components": "^1.12.0",
    "next": "10.0.3",
    "react": "16.13.0",
    "react-dom": "17.0.1",
    "react-query": "^3.5.1",
    "styled-components": "^5.2.1",
    "@prisma/cli": "^2.13.1",
    "@babel/core": "^7.12.10",
    "@babel/preset-react": "^7.12.10"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@prisma/cli": "^2.13.1"
  }
}

export async function getServerSideProps(context) {
  const response = await queryAlbum(context.query.id);
  const data = await JSON.stringify(response);
  const initialAlbumData = await JSON.parse(data);

  if (!initialAlbumData) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      initialAlbumData,
    },
  };
}