Общий селектор контекста с помощью `use-context-selector` ⇐ Javascript

[Anonymous]

У меня есть общий FormProvider, как показано ниже:

Код: Выделить всё

"use client";
import { useMemo } from "react";
import {
FieldValues,
FormProvider as RHFProvider,
SubmitErrorHandler,
SubmitHandler,
UseFormReturn,
} from "react-hook-form";
import { createContext, useContextSelector } from "use-context-selector";

type FormContext = {
form: UseFormReturn;
onChange?: (name: keyof T | string, value: any) => void;
};

export const FormContext = createContext(
{} as FormContext
);

export function FormProvider({
children,
onChange,
form,
className,
onSubmit,
onError,
}: {
form: UseFormReturn;
onSubmit: SubmitHandler;
onError?: SubmitErrorHandler;
onChange?: (name: keyof T | string, value: any) => void;
className?: string;
children: React.ReactNode;
}) {
const value = useMemo(() => {
console.log("Form valus changed");
return { form, onChange };
}, [form, onChange]);

console.log("form provider rerender");

return (


 {
e.preventDefault();
e.stopPropagation();
form.handleSubmit(onSubmit, onError)();
}}
>
{children}



);
}

export function useFormSelector(
selector: (ctx: FormContext) => Selected
): Selected {
return useContextSelector(FormContext, (ctx) => {
return selector(ctx as FormContext);
});
}

export function useFormContext() {
return useFormSelector(
(ctx) => ctx.form as UseFormReturn
);
}

Теперь я хочу использовать его вот так:

Код: Выделить всё

  const { control, errors, watch } = useFormSelector(
(ctx) => {
const form = ctx.form;
return {
control: form.control,
errors: form.formState.errors,
watch: form.watch,
};
}
);

К сожалению, у меня ошибка:

Код: Выделить всё

Property 'watch' does not exist on type 'unknown'.ts(2339)

и useFOrmSelector вынуждают меня использовать второй общий аргумент, но я хочу сделать вывод о нем на основе того, что я возвращаю в этом селекторе. Что мне следует изменить, чтобы все заработало?

Подробнее здесь: https://stackoverflow.com/questions/798 ... t-selector