javascript - React hook form promise function error in Typescript-reactjs - Stack Overflow

admin管理员组

文章数量:1122832

I'm using react-hook-form to create a login/signup form; however, when I use onSubmit={handleSubmit(onSubmit}} or onClick={handleGoogleSignIn} I'm receiving the following error:

Promise-returning function provided to attribute where a void return was expected.eslint@typescript-eslint/no-misused-promises const handleGoogleSignIn: () => Promise

Below is the relevant code:

import { useForm, SubmitHandler } from "react-hook-form";
import Swal from "sweetalert2";

const SignUp = () => {
  
  // Removed for brevity
  ...

  // imports for react-hook-form
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<FormInput>();

  // sign up function
  const onSubmit: SubmitHandler<FormInput> = async (data) => {
    // check if user is already logged in
    if (user) {
      await Swal.fire({
        icon: "error",
        title: "Already Logged in",
      }).then((result) => {
        if (result.isConfirmed) {
          navigate(from, { replace: true });
        }
      });
      reset();
    }

    // get the information from the user
    const name = data.name;
    const email = data.email;
    const phoneNumber = data.phoneNumber;
    const password = data.password;

    const userInfo: UserInfo = { name, email, phoneNumber, password };

    // Create new user
    await createUser?.(email, password)
      .then((result) => {
        if (result.user) {
          // update user name after account creation
          updateUserName?.(name)
            .then(() => {
              void Swal.fire({
                icon: "success",
                title: "Account Created",
                showConfirmButton: false,
                timer: 1500,
              });
              setTimeout(() => {
                navigate(from, { replace: true });
              }, 1600);
            })
            .catch((error) => {
              console.log(error);
            });
        }
      })
      .catch((error) => {
        console.log(error);
      });
    reset();
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        ...
      </form>
    </div>
  );
};

export default SignUp;

I've tried using an arrow function inside of the callback, like onSubmit={() => { handleSubmit(onSubmit)}} but that also doesn't work. Additionally, I've tried onSubmit={(e) => { handleSubmit(onSubmit) }} but it also doesn't work, passing the e param gives another error because react-hook-form already has a default data as its parameter.

本文标签： javascriptReact hook form promise function error in TypescriptreactjsStack Overflow