Zoeken op website

reactjs - Wanneer ik probeer een aangepaste hook-functie te importeren, krijg ik een TypeScript-fout

Ik probeer mijn aangepaste hookfunctie (RegisterUser) te importeren op mijn registratiespagina. Maar wanneer ik probeer te importeren zoals const { RegisterUser }=UseFirebase(), krijg ik een fout die zegt const RegisterUser: any Property 'RegisterUser' does not exist on type 'readonly [(email: string, password: string, name: string, history: any) => Promise]'.

Dit is mijn aangepaste hook-functie.

export default function UseFirebase() {
    const [user, setUser] = useState({})
    const [error, setError] = useState('')
    const [admin, setAdmin] = useState(false)
    const [isLoading, setIsLoading] = useState(true)
    const auth = getAuth()


    // REGISTER WITH EMAIL AND PASSWORD
    const RegisterUser = async (email: string, password: string, name: string, history: any) => {
        setIsLoading(true)
        const userCredential = await createUserWithEmailAndPassword(auth, email, password)

        const newUser = {
            email,
            displayName: name
        };

        setUser(newUser);
        setError('')

        // Pass userCredential.user instead of auth.currentUser
        updateProfile(userCredential.user, {
            displayName: name
        }).then(() => { }).catch((error) => { });
        history.replace('/');
    }

    return [RegisterUser] as const

}

Kan iemand mij alsjeblieft helpen? Hoe kan ik de fout oplossen?

Antwoord #1

Ik weet niet precies wat je probeert te doen, maar je hebt je component getypt als React.FunctionComponent<IUseFirebaseProps> terwijl je [RegisterUser] as const teruggeeft en RegisterUser is niet het juiste retourtype voor React.FunctionComponent<IUseFirebaseProps> of React.ReactElement<any, any> | null.

Als je probeert een aangepaste hook te maken, moet je React.FunctionComponent<IUseFirebaseProps> en React.ReactElement<any, any> | null verwijderen, die niet nodig zijn in een aangepaste hook.

Ook hoeft een custom hook geen props van het type React.PropsWithChildren<IUseFirebaseProps> te ontvangen, misschien gewoon IUseFirebaseProps als een normale functieparameter gebruiken.

Ik gok hier, maar je hebt waarschijnlijk zoiets nodig:

// type for the RegisterUserFunction
type RegisterUserFunction = (
  email: string,
  password: string,
  name: string,
  history: any
) => Promise<void>;

const UseFirebase = (
  props: IUseFirebaseProps, // it's not the props from a component, but more like a normal function parameter
  context?: any
): [RegisterUserFunction] => {
  // other hooks

  // REGISTER WITH EMAIL AND PASSWORD
  const RegisterUser: RegisterUserFunction = async (
    email: string,
    password: string,
    name: string,
    history: any
  ) => {
    // your function
  };

  return [RegisterUser]; // no need to use as const
};

Gerelateerde artikelen