Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

useFormState error - No overload matches this call

I'm very new to building web applications, and am running into trouble with useFormState. I'm working on creating an edit form for entries in my database, but the code that I've used in the past is now giving me an error stating that there are no overload matches for my useFormState call.

    
    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...*/
    }
    

My updateDataCatalogEntry is as follows:


    (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;
    }>

The error I am receiving is:

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)

Here are my package versions:


    {
        "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"
        }
    }

In a previous project that I did, this usage of useFormState worked fine. I compared the functions from the old code (on the right of this image below), to the new code, and noticed that in some update, this function was changed.

Comparing past versions of useFormState

My question is, why was this change made to the function, and what do I need to do to modify my code to be able to handle the new changes?

like image 581
JaW Avatar asked Oct 15 '25 03:10

JaW


2 Answers

Answered my own question. The issue was that in my initialState variable, I was passing 'null' as the message, which was not allowed. Changing message to an empty string made the error go away.

If anyone can provide any feedback on why this is the case, that would be greatly appreciated.

like image 124
JaW Avatar answered Oct 19 '25 03:10

JaW


I also encountered the same problem, I think the problem may be in the definition of updateDataCatalogEntry return type

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
    }>

enter image description here

like image 42
Lin Avatar answered Oct 19 '25 04:10

Lin



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!