¿Hay alguna manera de hacer que esto funcione sin cambiar mi componente de función a un componente basado en clase?
export default function SendVerificationCode({ route, navigation }: NativeStackScreenProps< NativeStackParameterList, 'SendVerificationCode' >): JSX.Element { async function getVerificationCode( passwordApi: PasswordApi, agencyKey: number, username: string, email: string, verificationCode: string ): Promise<void> { const response = await passwordApi.getReset( new GetResetRequest({ agencyKey: agencyKey, email: email, username: username, verificationCode: verificationCode }) ); verifyCodeContext.userName = username; navigation.navigate('VerifyCode', { copyrightYear: 2021, version: '0.0.0.1' }); } const onSubmit = (data: any) => { getVerificationCode( new PasswordApi(), 1234, data.username, data.email, '123' ); }; return ( <UnauthenticatedTemplate copyrightYear={year} version={version}> <Form style={styles.form} submitText="Send Code" onSubmit={onSubmit} schema={SendVerificationCodeSchema} > <FCTextField name="username" placeholder="Username" /> <FCTextField name="email" placeholder="Email" /> </Form> </UnauthenticatedTemplate> ); } onSubmit funciona perfectamente bien hasta que llamo a getVerificationCode
mi función axios getReset se ve así:
public getReset( getResetRequest: GetResetRequest, cancelToken?: CancelToken ): Promise<StandardResponse<GetResetResponse>> { return this.get( this.configuration.portal, '/mvc/api/password/reset', classToPlain(getResetRequest, BaseApi.classTransformOptions), cancelToken, new StandardResponse<GetResetResponse>(GetResetResponse) ); }En algún lugar de su aplicación, está llamando a un enlace (funciones que comienzan con uso como useState) dentro de una función que no es un componente React, no creo que el problema esté dentro de los fragmentos de código que ha incluido, tal vez ¿El problema está en la pantalla a la que estás navegando?
Revise su código y busque ganchos y asegúrese de que no estén en una función, ejemplos:
// Right implementation function SomeComponent(props) { const hook = useHook() return <View /> } // Wrong implementation function SomeComponent(props) { function nestedFunction() { const hook = useHook() } return <View /> }Espero que encuentres esto útil