TypeScript“没有重载与此调用匹配”

Question

我有一个异步函数，可以调用后端，我希望它返回 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'.

从异步函数调用返回对象的正确方法是什么？或者我只需要正确定义它？

Answer 1

useFormState

从哪里来？ 您确定它接受具有以下调用签名的函数：

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

不是

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

因为在错误中它指出它需要是

{} | undefined

而不是

string | undefined