useFormState 表单验证出现意外错误

Question

我的网络应用程序遇到问题。我正在尝试验证面板标题的长度，使其至少包含 3 个或更多字符，但是它会引发如下所示的 useFormState 错误。

这是我遇到麻烦的部分的代码！：

"use client";

import {create} from "@/actions/create-board";
import {Button} from "@/components/ui/button";

import {useFormState} from "react-dom"

export const Form = () => {
    const initialState = { message: null, errors: {} }
    const [state, dispatch] = useFormState(create, initialState);
    return (
        <form action={dispatch}>
                <input
                    id="title"
                    name="title"
                    required
                    placeholder={"Enter a board title"}
                    className={"border-black border p-1 "}
                />
            <Button type={"submit"}>
                Submit
            </Button>
        </form>
    )
}

"use server";

import { z } from "zod";

import {db} from "@/lib/db";

import {revalidatePath} from "next/cache";
import {redirect} from "next/navigation"


export type State = {
    errors?: {
        title?: string[];
    },
    message?: string | null;
}

const CreateBoard =  z.object({
    title: z.string().min(3, {
        message: "Min 3 letters"
    })
});

export async function create(prevState: State, formData: FormData) {

    const validatedFields = CreateBoard.safeParse({
        title: formData.get("title"),
    });

    if(!validatedFields.success) {
        return {
            errors: validatedFields.error.flatten().fieldErrors,
            message: "Missing fields."
        }
    }

    const {title} = validatedFields.data;

    try {
        await db.board.create({
            data: {
                title,
            }
        });
    } catch (error){
        return {
            message: "Database error",
        }
    }

    revalidatePath("/organization/org_2cQ2tlEKmT3NM0MhMToFu2VzSyh");
    redirect("/organization/org_2cQ2tlEKmT3NM0MhMToFu2VzSyh")
}

我对此感到非常困惑，因为我只是习惯使用 React。有人可以解释为什么它会抛出这个错误，那就太好了:)

Answer 1

我通过更改

解决了这个问题

常量初始状态 = { 消息：null，错误：{} }

到

const initialState : State = { 消息: null, 错误: {} };

非常有帮助，谢谢