.map 不是函数 Vercel Deploy

如何解决.map 不是函数 Vercel Deploy

通常，如果我在使用 .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",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 });
}

和：

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

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

  try {
    const albums = await prisma.album.findMany();
    return albums;
  } catch (error) {
    return { error: error };
  } finally {
    prisma.$disconnect();
  }
}

export default async function Albums(req,res) {
  const albums = await queryAlbums();
  res.json({ albums: albums });
}

关于我为什么选择导入 queryAlbum 和 queryAlbums 的一些背景信息，这里有一个关于 Git 的线程，我曾经将我的代码基于： https://github.com/vercel/next.js/discussions/13648

解决方法

我分两步解决了这个问题。

首先，我在 Git 上找到了一个答案：https://github.com/vercel/next.js/issues/8041。基本上，我需要做的就是删除“babel”配置。我真的不知道为什么这个答案有效。我会调查它并在此处发布更新。

导致部署错误的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","start": "next start -p $PORT","postinstall": "prisma generate","heroku-postbuild": "npm run build"
  },"react": "16.13.0","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 并删除 getStaticPaths。下面是 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。这些不是普通方法，它们是http方法，可以通过http(http call)消费。

import { queryAlbum } from "../../api/albums/[id]";
import { queryAlbums } from "../../api/albums";

我正在使用 fetch 来使用相应的 api。

export async function getStaticPaths() {
  const data = await fetch('/api/albums');
  const albums = await data.json();
  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 fetch(`/api/albums/${params.id}`);
  const data = await response.json();
  return {
    props: {
      initialAlbumData: data,};
}

.map 不是函数 Vercel Deploy

如何解决.map 不是函数 Vercel Deploy

解决方法

相关推荐