TypeScript «Нет перегрузки, соответствующей этому вызову»

У меня есть асинхронная функция, которая вызывает серверную часть, и я хочу, чтобы она возвращала сообщение об ошибке 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'.

Каков правильный способ вернуть объект из вызова асинхронной функции? Или мне просто нужно правильно это определить?

В каких номерах строк и столбцов появляется эта ошибка? Какие строки в приведенных выше фрагментах?

Joseph 28.06.2024 15:44

Это для register в const [errorMessage, dispatch] = useFormState(register, undefined);

Viktor 28.06.2024 15:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
66
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Откуда берется useFormState? И уверены ли вы, что он принимает функцию с такой сигнатурой вызова, например:

(
  prevState: string | undefined,
  formData: FormData
) => void

нет

(
  prevState: {} | undefined,
  formData: FormData
) => void

потому что в ошибке указано, что это должно быть {} | undefined, а не string | undefined

Другие вопросы по теме