tengo el siguiente codigo de React
:
export function AccountActivation() {
const props = useLocation().state
console.log(props)
const {register, handleSubmit, formState:{errors}} = useForm()
let [userActivated, setUserActivated] = useState(false)
let [realActivationCode, setRealActivationCode] = useState(null)
let [mailSended, setMailSended] = useState(false)
const sendMail = async ()=>{
const response = await sendActivationEmailAPI(props.userEmail, props.username)
console.log('enviando correo de activacion')
setRealActivationCode(response)
setMailSended(true)
}
useEffect(()=>{
if (!mailSended){
sendMail()
}
}, [])
const onSubmit = handleSubmit(async (data)=>{
if (Number(data.activation_code) === Number(realActivationCode)){
try {
const response = await activateUserAPI(props.userId)
if (response.status === 200){
console.log('Exito activando el usuario')
console.log(response)
setUserActivated(true)
} else {
console.log('Error activando usuario')
console.log(response)
}
} catch(error){
console.log('Error activando el usuario')
console.log(error)
}
}
})
if (userActivated === true){
return <Navigate to="/login/"/>
} else{
return (
<>
<Header/>
<div>
<h1>
Ingresa el código de activación
</h1>
<form onSubmit={onSubmit}>
<FormField label="Codigo " errors={errors.activation_code && errors.activation_code.message}>
<input
type="text"
maxLength={6}
minLength={1}
name="activation_code"
id="activation_code"
{...register("activation_code", {
required : {
value : true,
message : "Por favor ingresa un código de activación"
},
pattern : {
value : /^-?\d+$/,
message : "Por favor, ingresa un codigo valido"
},
minLength : {
value : 6,
message : 'Debes ingresar al menos 6 caracteres',
}
})}
/>
<button type="submit">enviar</button>
</FormField>
</form>
</div>
</>
)
}
}
Tengo la necesidad de hacer que la funcion sendMail()
se ejecute unicamente una vez (la primera vez que el comp
sea renderizado), pues la funcion se esta ejecutando dos veces por alguna razon desconocida. Alguien tiene alguna idea?