如何在Prisma+MySQL中发送带空格的枚举值？

当然可以实现。你的Prisma Schema已经通过@map指令把枚举键映射成了数据库中带空格的文本，现在只需要调整前端和后端的逻辑，让前端可以直接提交带空格的状态文本，后端自动转换为Prisma需要的枚举键即可。

步骤1：修改前端，使用带空格的状态选项 #

把当前的status输入逻辑改成下拉选择器，避免用户手动输入错误，同时直接展示带空格的状态文本：

import React, {useState} from 'react';
import Router from 'next/router';

const AddRequest = () => {
    const [name, setName] = useState('');
    const [projectID, setProjectID] = useState('');
    const [accountName, setAccountName] = useState('');
    // 初始值改为带空格的状态文本
    const [status, setStatus] = useState('To be Started');
    const [requestType, setRequestType] = useState('');
    const [totalHours, setTotalHours] = useState(0);

    // 定义所有可选状态
    const statusOptions = [
        'To be Started',
        'Work in Progress',
        'Awaiting Customer Confirmation',
        'Completed'
    ];

    const submitData = async (e: React.SyntheticEvent) => {
        e.preventDefault();
        try {
            const data = {
                name,
                projectID,
                accountName,
                status,
                requestType,
                totalHours,
            };
            await fetch('/api/requests/add', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(data),
            });
            await Router.push('/requests');
        } catch (error) {
            console.log(error);
        }
    };
    return (
        <>
            <div className="container flex-auto">
                <form onSubmit={submitData}>
                    <h1 className="text-3xl">New Request</h1>
                    <div className="text-center grid grid-cols-2 gap-3">
                        <input
                            className="border border-black"
                            type="text"
                            placeholder="Name"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                        />
                        <input
                            className="border border-black"
                            type="text"
                            placeholder="Project ID"
                            onChange={(e) => setProjectID(e.target.value)}
                            value={projectID}
                        />
                        <input
                            className="border border-black"
                            type="text"
                            placeholder="Account Name"
                            onChange={(e) => setAccountName(e.target.value)}
                            value={accountName}
                        />
                        <input
                            className="border border-black"
                            type="text"
                            placeholder="Request Type"
                            onChange={(e) => setRequestType(e.target.value)}
                            value={requestType}
                        />
                        {/* 替换为下拉选择器 */}
                        <select
                            className="border border-black"
                            value={status}
                            onChange={(e) => setStatus(e.target.value)}
                        >
                            {statusOptions.map(option => (
                                <option key={option} value={option}>{option}</option>
                            ))}
                        </select>
                        <button
                            className="border border-black bg-red-100"
                            disabled={!name || !projectID}
                            type="submit">
                            Create
                        </button>
                    </div>
                </form>
            </div>
        </>
    );
};
export default AddRequest;

步骤2：后端API添加状态映射逻辑 #

在创建数据库条目的API中，添加映射对象，把前端传来的带空格状态文本转换为Prisma枚举对应的键：

import type {NextApiRequest, NextApiResponse} from 'next';
import prisma from '../../../../lib/prisma';
import { requests_status } from '@prisma/client';

export default async function handle(
    req: NextApiRequest,
    res: NextApiResponse
) {
    const {name, projectID, accountName, status, requestType, totalHours} =
        req.body;

    // 建立状态文本到Prisma枚举键的映射
    const statusMap: Record<string, requests_status> = {
        "To be Started": "To_be_Started",
        "Work in Progress": "Work_in_Progress",
        "Awaiting Customer Confirmation": "Awaiting_Customer_Confirmation",
        "Completed": "Completed"
    };

    // 转换状态，提供默认值避免错误
    const mappedStatus = statusMap[status] || requests_status.Completed;

    const result = await prisma.requests.create({
        data: {
            name: name,
            project_id: projectID,
            account_name: accountName,
            status: mappedStatus,
            request_type: requestType,
            total_hours_spent: totalHours,
        },
    });
    res.json(result);
}

原理说明 #

• Prisma的@map指令已经确保数据库中最终存储的是带空格的文本（比如To be Started），而非枚举键的下划线形式。
• 前端通过下拉选择器直接使用带空格的状态文本，无需处理下划线转换。
• 后端的映射逻辑负责把前端的文本转换为Prisma客户端能识别的枚举键，保证数据能正确存入数据库。

内容的提问来源于stack exchange，提问作者Hunter Bertoson