Next.js Discord

Discord Forum

Type Error in useFormStatus

Unanswered
cougarb8 posted this in #help-forum
Open in Discord
cougarb8OP
//actions.ts
export type FormState = {
    success: string | undefined
    errors: {
        message?: string | undefined
    }
}

export const deleteEducation = async (previousState: FormState, formData: FormData) => {
    console.log(formData)
    try {
        const session = await auth()
        if (!session) {
            return {
                success: undefined,
                errors: {
                    message: 'Not authenticated',
                },
            }
        }

        const id = formData.get('id')
        console.log(id)
        if (!id) {
            return {
                success: undefined,
                errors: {
                    message: 'Failed to delete education record',
                },
            }
        }
        const result = await prisma.education.delete({
            where: { id: String(id) },
        })

        revalidatePath('/intern/profile')
        if (result) {
            return {
                success: 'Education record deleted successfully',
                errors: {
                    message: undefined,
                },
            }
        }
    } catch (e) {
        console.log(e)
        return null
    }
}


//DeleteEducation.tsx
import { deleteEducation, FormState } from '@/lib/actions'
const initialState = {
    success: '',
    errors: {
        message: '',
    },
} as FormState
export default function DeleteEducation({ id, institution, major, startDate, endDate, honors }: DeleteEducationProps) {
    unstable_noStore()
    const [formState, removeEducationRecord] = useFormState(deleteEducation, initialState)

17 Replies

cougarb8OP
Specifically this line is throwing an error

const [formState, removeEducationRecord] = useFormState(deleteEducation, initialState)

Error: TS2769 - No overload matches this call.

1. Overload 1 of 2:
   Function signature:
   (action: (state: FormState | null | undefined) => FormState | Promise<FormState | null | undefined> | null | undefined, initialState: FormState | null | undefined, permalink?: string | undefined): [state: ...]

   Error:
   Argument of type (previousState: FormState, formData: FormData) => Promise<{ success: undefined; errors: { message: string; }; } | { success: string; errors: { message: undefined; }; } | null | undefined> is not assignable to parameter of type (state: FormState | null | undefined) => FormState | Promise<FormState | null | undefined> | null | undefined.
   Target signature provides too few arguments. Expected 2 or more, but got 1.

2. Overload 2 of 2:
   Function signature:
   (action: (state: FormState | null | undefined, payload: FormData) => FormState | Promise<FormState | null | undefined> | null | undefined, initialState: FormState | ... 1 more ... | undefined, permalink?: string | undefined): [state: ...]

   Error:
   Argument of type (previousState: FormState, formData: FormData) => Promise<{ success: undefined; errors: { message: string; }; } | { success: string; errors: { message: undefined; }; } | null | undefined> is not assignable to parameter of type (state: FormState | null | undefined, payload: FormData) => FormState | Promise<FormState | null | undefined> | null | undefined.
   Types of parameters previousState and state are incompatible.
   Type FormState | null | undefined is not assignable to type FormState.
   Type undefined is not assignable to type FormState.
export const deleteEducation = async (previousState: any, formData: FormData)


I've narrowed it down to the previousState type, because when I change it to any type the issue resolves
I'm not sure why its saying previousState is FormState | null | undefined when I typecasted it to be FormState
@cougarb8 I'm not sure why its saying previousState is `FormState | null | undefined` when I typecasted it to be `FormState`
Ray
I usaully just do this
const initialState = {} as Awaited<ReturnType<typeof deleteEducation>>
@Ray I usaully just do this ts const initialState = {} as Awaited<ReturnType<typeof deleteEducation>>
cougarb8OP
So then in my actions.ts what should the type be for previousState?
i cant reference the function in the type
should i just use any
i would prefer not to use any
Ray
export type DeleteEducationFormState = Awaited<ReturnType<typeof deleteEducation>>
Plott Hound
yeah its confusing, in the docs they actually use any XD
cougarb8OP
export type DeleteEducationFormState = Awaited<ReturnType<typeof deleteEducation>>

export const deleteEducation = async (previousState: DeleteEducationFormState, formData: FormData) => {
...
}

TS2456: Type alias  DeleteEducationFormState  circularly references itself.
yeah they use any in the docs lol
does it work?
i guess not lol
cougarb8OP
same issue of circularly referencing itself
@cougarb8 same issue of circularly referencing itself
Ray
ok try this
export type FormState =
  | {
      success: string | undefined;
      errors: {
        message?: string | undefined;
      };
    }
  | null
  | undefined;