尝试使用 sveltekit 在 prisma 中发布隐藏的输入数据时出现 400 错误

Question

我正在重建一个我为编码竞赛制作的刽子手应用程序，我真的被卡住了，我在尝试将我的表单发送到 postgreSQL 数据库时不断收到 400 错误 - 错误请求响应。

我基本上是在使用这个 tutorial 来构建我的 CRUD 操作，我在尝试更新我的玩家表以更新数据库中的数据时遇到了麻烦，所以我有一些排行榜统计数据要显示在我的应用程序中。我正在使用 cookie 来查找玩家名称（在数据库中是唯一的）。 Sveltekit 中没有关于如何使用隐藏输入或您已有的值将数据发送到服务器的文档，发送数据的唯一方法似乎是通过表单，但是如果我进入检查元素选项卡并查看我的有效负载对于糟糕的请求，它看起来完全没问题。这是一些代码，所以我不只是告诉你它，

myComponent.svelte:

<form method="POST" action="/random"> // sends the action to my /random server page
          <input value={wins} name="gamesWon" type="number" hidden />
          <input
            value={leastLettersGuessed}
            name="lowestGuesses"
            type="number"
            hidden
          />
          <button class="btn-dark">Go to leaderboard</button>
        </form>

我从 sessionStorage 获取我的值，但我认为这不应该是问题所在。 这是我的服务器文件，它正在验证数据并将其发送到服务器，

随机/+page.server.ts:

import prisma from "$lib/prisma";
import { fail, redirect } from '@sveltejs/kit';
import type { Actions } from './$types';

export const actions = {
    // 1.
    default: async ({ request, cookies }) => {
        const data = await request.formData();

        let gamesWon = data.get("gamesWon");
        let lowestGuesses = data.get("lowestGuesses");
        let name = cookies.get('playerName');
       

        // 2.
        if (!gamesWon || !lowestGuesses) {
            return fail(400, { gamesWon, lowestGuesses, missing: true });
        }

        // 3.
        if (typeof gamesWon != "number" || typeof lowestGuesses != "number") {
            return fail(400, { incorrect: true })
        }

        // 4.
        await prisma.player.update({
            where: {
                name: name,
            },
            data: {
                gamesWon,
                lowestGuesses,
            },
        });

        //5.
        throw redirect(303, `/leaderboard`)
    }
} satisfies Actions;

我想也许我向数据库发送了错误的名字，但我改变了它们，但我仍然遇到同样的错误。这是我的数据模型：

model Player {
  id            Int    @id @default(autoincrement())
  name          String @unique
  gamesWon      Int    @default(0) @map("games_won")
  lowestGuesses Int    @default(27) @map("lowest_guesses")
  games         Game[]
}

这是一个非常令人沮丧的错误，信息很少，请帮忙，谢谢！

Answer 1

问题是

formData().get()

只能返回

FormDataEntryValue

File

或

string

.

因此在您的代码中，您将始终获得

string

作为数据类型并检查它是否属于

number

类型将始终返回 false。

// always returns 400
if (typeof gamesWon != "number" || typeof lowestGuesses != "number") {
    return fail(400, { incorrect: true })
}

因此，如果您使用像

parseInt

这样的东西，您可以通过使用

isNaN()

检查结果来检查它是否是有效数字

例如：

let gamesWonString =  data.get("gamesWon");
let lowestGuessesString = data.get("lowestGuesses");

if (!gamesWonString || !lowestGuessesString) {
   return fail(400, { gamesWonString, lowestGuessesString, missing: true });
}

let gamesWon = parseInt(gamesWonString.toString())
let lowestGuesses = parseInt(lowestGuessesString.toString())

// 3.
if (isNaN(gamesWon) || isNaN(lowestGuesses)) {
    return fail(400, { incorrect: true })
}