У меня есть асинхронная функция, которая вызывает серверную часть, и я хочу, чтобы она возвращала сообщение об ошибке axios. Затем я могу перечислить сообщения в форме.
export async function register(
prevState: string | undefined,
formData: FormData
) {
try {
const res = await axios({
method: "post",
url: process.env.NEXT_PUBLIC_BACKEND_URL + "auth/register/",
data: {
username: formData.get("username"),
email: formData.get("email"),
password1: formData.get("password1"),
password2: formData.get("password2"),
},
});
if (res && res.status != 200 && res.status != 201) {
return "Something went wrong";
} else {
return "ok";
}
} catch (error: any) {
console.error(error);
return Object.keys(error.response.data).map(
(key) => error.response.data[key][0]
);
}
}
export default function RegisterPage() {
const [errorMessage, dispatch] = useFormState(register, undefined);
const { pending } = useFormStatus();
if (errorMessage === "ok") {
window.location.href = "/email/confirm/";
}
return (
...
{errorMessage &&
typeof errorMessage === "object" &&
errorMessage.map((e, index) => (
<div key = {index}>
<span>{e}</span>
</div>
))}
...
);
}
Typescript выдает ошибку для register
в const [errorMessage, dispatch] = useFormState(register, undefined);
:
No overload matches this call.
Overload 1 of 2, '(action: (state: {} | undefined) => {} | Promise<{} | undefined> | undefined, initialState: {} | undefined, permalink?: string | undefined): [state: {} | undefined, dispatch: () => void, isPending: boolean]', gave the following error.
Argument of type '(prevState: string | undefined, formData: FormData) => Promise<{}>' is not assignable to parameter of type '(state: {} | undefined) => {} | Promise<{} | undefined> | undefined'.
Target signature provides too few arguments. Expected 2 or more, but got 1.
Overload 2 of 2, '(action: (state: {} | undefined, payload: FormData) => {} | Promise<{} | undefined> | undefined, initialState: {} | undefined, permalink?: string | undefined): [state: ...]', gave the following error.
Argument of type '(prevState: string | undefined, formData: FormData) => Promise<{}>' is not assignable to parameter of type '(state: {} | undefined, payload: FormData) => {} | Promise<{} | undefined> | undefined'.
Types of parameters 'prevState' and 'state' are incompatible.
Type '{} | undefined' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
Каков правильный способ вернуть объект из вызова асинхронной функции? Или мне просто нужно правильно это определить?
Это для register
в const [errorMessage, dispatch] = useFormState(register, undefined);
Откуда берется useFormState
?
И уверены ли вы, что он принимает функцию с такой сигнатурой вызова, например:
(
prevState: string | undefined,
formData: FormData
) => void
нет
(
prevState: {} | undefined,
formData: FormData
) => void
потому что в ошибке указано, что это должно быть {} | undefined
, а не string | undefined
В каких номерах строк и столбцов появляется эта ошибка? Какие строки в приведенных выше фрагментах?