reactjs - ใช้ useFormState มีข้อผิดพลาด - ไม่มีการโอเวอร์โหลดที่ตรงกับการเรียกนี้

ฉันเพิ่งเริ่มต้นสร้างเว็บแอปพลิเคชัน และกำลังประสบปัญหากับ useFormState ฉันกำลังทำงานสร้างฟอร์มแก้ไขสำหรับรายการในฐานข้อมูลของฉัน แต่โค้ดที่ฉันเคยใช้ในอดีตตอนนี้ทำให้เกิดข้อผิดพลาดระบุว่าไม่มีการจับคู่ overload สำหรับการเรียกใช้ useFormState ของฉัน

    
    export default function EditDataCatalogEntryForm({ data }: { 
    data: DataCatalogFile }) {
        const initialState = { message: null, errors: {} };
        const updateDataCatalogEntryWithId = 
    updateDataCatalogEntry.bind(null, data.file_id);
        const [state, dispatch] = 
    useFormState(updateDataCatalogEntryWithId, initialState);
    
    /*...other function code...*/
    }
    

การอัปเดตข้อมูลแค็ตตาล็อกของฉันมีดังนี้:

    (alias) function updateDataCatalogEntry(id: number, 
    prevState: State, formData: FormData): Promise<{
        errors: {
            source?: string[] | undefined;
            s3_location?: string[] | undefined;
            tags?: string[] | undefined;
            file_name?: string[] | undefined;
            description?: string[] | undefined;
        };
        message: string;
    }>

ข้อผิดพลาดที่ฉันได้รับคือ:

No overload matches this call.
  Overload 1 of 2, '(action: (state: { errors: { source?: string[] | undefined; s3_location?: string[] | undefined; tags?: string[] | undefined; file_name?: string[] | undefined; description?: string[] | undefined; }; message: string; }) => { ...; } | Promise<...>, initialState: { ...; }, permalink?: string | undefined): [state: ...]', gave the following error.
    Argument of type '(prevState: State, formData: FormData) => Promise<{ errors: { source?: string[] | undefined; s3_location?: string[] | undefined; tags?: string[] | undefined; file_name?: string[] | undefined; description?: string[] | undefined; }; message: string; }>' is not assignable to parameter of type '(state: { errors: { source?: string[] | undefined; s3_location?: string[] | undefined; tags?: string[] | undefined; file_name?: string[] | undefined; description?: string[] | undefined; }; message: string; }) => { ...; } | Promise<...>'.
      Target signature provides too few arguments. Expected 2 or more, but got 1.
  Overload 2 of 2, '(action: (state: { errors: { source?: string[] | undefined; s3_location?: string[] | undefined; tags?: string[] | undefined; file_name?: string[] | undefined; description?: string[] | undefined; }; message: string; }, payload: FormData) => { ...; } | Promise<...>, initialState: { ...; }, permalink?: string | undefined): [state: ...]', gave the following error.
    Argument of type '{ message: null; errors: {}; }' is not assignable to parameter of type '{ errors: { source?: string[] | undefined; s3_location?: string[] | undefined; tags?: string[] | undefined; file_name?: string[] | undefined; description?: string[] | undefined; }; message: string; }'.
      Types of property 'message' are incompatible.
        Type 'null' is not assignable to type 'string'.ts(2769)
(alias) useFormState<{
    errors: {
        source?: string[] | undefined;
        s3_location?: string[] | undefined;
        tags?: string[] | undefined;
        file_name?: string[] | undefined;
        description?: string[] | undefined;
    };
    message: string;
}>(action: (state: {
    ...;
}) => {
    ...;
} | Promise<...>, initialState: {
    ...;
}, permalink?: string | undefined): [state: ...] (+1 overload)

นี่คือเวอร์ชันของแพ็กเกจของฉัน:

    {
        "name": "my_app",
        "version": "1.0.0",
        "description": "Broken app",
        "main": "next.config.js",
        "scripts": {
            "build": "next build",
            "dev": "next dev",
            "start": "next start",
            "seed": "node -r dotenv/config ./scripts/seed.js",
            "lint": "next lint"
        },
        "author": "",
        "license": "ISC",
        "dependencies": {
            "@heroicons/react": "^2.1.1",
            "@nextui-org/react": "^2.2.9",
            "autoprefixer": "^10.4.17",
            "dotenv": "^16.4.1",
            "next": "^14.1.0",
            "pg": "^8.11.3",
            "react": "^18.2.0",
            "react-dom": "^18.2.0",
            "use-debounce": "^10.0.0",
            "zod": "^3.22.4"
        },
        "devDependencies": {
            "@types/node": "^20.11.6",
            "@types/pg": "^8.10.9",
            "@types/react": "^18.2.48",
            "@types/react-dom": "^18.2.18",
            "typescript": "^5.3.3"
        }
    }

ในโครงการก่อนหน้าที่ฉันทำ การใช้งาน useFormState แบบนี้ทำงานได้ดี ฉันเปรียบเทียบฟังก์ชันจากโค้ดเก่า (ทางด้านขวาของภาพด้านล่างนี้) กับโค้ดใหม่ แล้วสังเกตว่าในการอัปเดตบางอย่าง ฟังก์ชันนี้ถูกเปลี่ยนแปลง

คำถามของฉันคือ ทำไมต้องมีการเปลี่ยนแปลงฟังก์ชันนี้ และฉันต้องทำอะไรบ้างเพื่อปรับโค้ดของฉันให้สามารถรองรับการเปลี่ยนแปลงใหม่ได้?

คำตอบ #1

ฉันตอบคำถามของตัวเอง ปัญหาคือในตัวแปร initialState ของฉัน ฉันได้ส่ง 'null' เป็นข้อความ ซึ่งไม่ได้รับอนุญาต การเปลี่ยนข้อความเป็นสตริงว่างทำให้ข้อผิดพลาดหายไป

ถ้าใครสามารถให้ข้อเสนอแนะเกี่ยวกับว่าทำไมถึงเป็นเช่นนี้ จะต้องขอบคุณอย่างมาก

คำตอบ #2

ฉันก็พบปัญหาเดียวกัน ฉันคิดว่าปัญหาอาจอยู่ที่การนิยามประเภทการคืนค่าของ updateDataCatalogEntry

function updateDataCatalogEntry(id: number, 
    prevState: State, formData: FormData): Promise<{
        errors: {
            source?: string[] | undefined;
            s3_location?: string[] | undefined;
            tags?: string[] | undefined;
            file_name?: string[] | undefined;
            description?: string[] | undefined;
        };
        message: string | null; // here
    }>

กรอกคำอธิบายรูปภาพที่นี่