reactjs - Når jeg prøver at importere en brugerdefineret hook-funktion, får jeg en typescript-fejl

Jeg forsøger at importere min brugerdefinerede hook-funktion (RegisterUser) på min registreringsside. Men når jeg forsøger at importere på denne måde const { RegisterUser }=UseFirebase(), får jeg en fejl, som er const RegisterUser: any Property 'RegisterUser' does not exist on type 'readonly [(email: string, password: string, name: string, history: any) => Promise<void>]'.

Dette er min brugerdefinerede hook-funktion.

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 nogen hjælpe mig, tak? Hvordan kan jeg løse fejlen?

Svar #1

Jeg er ikke sikker på, hvad du prøver at gøre, men du har skrevet din komponent som React.FunctionComponent<IUseFirebaseProps>, men du returnerer [RegisterUser] as const, og RegisterUser er ikke den korrekte returtype for React.FunctionComponent<IUseFirebaseProps> eller React.ReactElement<any, any> | null.

Hvis du prøver at lave en brugerdefineret hook, bør du fjerne React.FunctionComponent<IUseFirebaseProps> og React.ReactElement<any, any> | null, som ikke er nødvendige i en brugerdefineret hook.

Også behøver en brugerdefineret hook ikke at modtage props af typen React.PropsWithChildren<IUseFirebaseProps>, måske bare brug IUseFirebaseProps som en normal funktionsparameter.

Jeg gætter her, men du har sandsynligvis brug for noget som dette:

// 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
};

Relaterede artikler