挂钩错误-无法使用Prisma和NextJS创建记录

我有一个内置的T-t3应用程序，我在使用Prisma创建记录时遇到了挂钩问题。我尝试使用一个带有两个简单文本字段的Web表单来插入一条记录。
完整的错误似乎与.create（）函数行const itemAdd = ...有关
未处理的运行时错误TypeError：hooks[lastArg]不是函数
我也看到了错误
错误：对象作为React子对象无效（找到：[object Promise]）。如果你想呈现一个子元素的集合，请使用数组。

index.tsx

import Head from "next/head";
import { api } from "~/utils/api";
import React, { FormEvent, ReactNode } from "react";

export default async function Home() {
  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const formData = new FormData(e.currentTarget);

    /* THE hooks[lastArg] is not a function ERROR SEEMS TO COME UP AT THE .create() on the following line: */
    const itemAdd = await api.item.create({
      data: {
        name: (e.currentTarget.elements.namedItem("name") as HTMLInputElement)
          .value,
        isbn: (e.currentTarget.elements.namedItem("isbn") as HTMLInputElement)
          .value,
      },
      // include: { id: true }, // Returns all fields for all posts
    });

    console.log(itemAdd.id);
  }

  return (
    <>
      <Head>
        <title>lectura.io</title>
        <meta name="description" content="" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="flex min-h-screen flex-col items-center justify-center">
        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
          <h1 className="text-5xl font-extrabold tracking-tight  sm:text-[5rem]">
            This is cool
          </h1>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
            <div>
              name: <input type="text" name="name" className="border-2" />
            </div>
            <div>
              isbn: <input type="text" name="isbn" placeholder="isbn" />
            </div>
            <button type="submit">Submit</button>
          </div>
        </form>
      </main>
    </>
  );
}

UPDATE：在 * item.ts（router）下面添加ctx.db.item.create（）的代码

import { z } from "zod";
import {
    createTRPCRouter,
    protectedProcedure,
    publicProcedure,
} from "~/server/api/trpc";
import { api } from "~/utils/api";

export const itemRouter = createTRPCRouter({
    getById: publicProcedure.input(z.string()).query(({ ctx, input }) => {
        return ctx.db.item.findFirst({
            where: {
                id: input,
            },
        });
    }),

    create: publicProcedure
        .input(
            z.object({
                name: z.string(),
                isbn: z.string(),
            }),
        )
        .mutation(async ({ ctx, input }) => {
            //const userId = ctx.session.user.id;
            try {
                const item = await ctx.db.item.create({
                    data: {
                        name: input.name,
                        isbn: input.isbn,
                    },
                });

                return item;
            } catch (error) {
                console.log(error);
            }
        }),
});

我已经尝试了我能想到的所有组合来声明/使用，我还尝试了在Home（）函数内部和外部使用handleSubmit。
任何帮助都非常感谢！

编辑：添加更多代码 * API.ts**

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "~/server/api/root";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

/** A set of type-safe react-query hooks for your tRPC API. */
export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});

export type RouterInputs = inferRouterInputs<AppRouter>;

export type RouterOutputs = inferRouterOutputs<AppRouter>;

root.ts

import { exampleRouter } from "~/server/api/routers/example";
import { createTRPCRouter } from "~/server/api/trpc";
import { itemRouter } from "./routers/item";

/**
 * This is the primary router for your server.
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = createTRPCRouter({
  example: exampleRouter,
  item: itemRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;

挂钩错误-无法使用Prisma和NextJS创建记录

1条答案

相关问题

热门标签

最新问答