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.
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?
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With