0

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?

2
  • estas corriendo tu aplicacion dentro de las etiquetas <React.StrictMode> ? Commented el 26 jun. 2023 a las 13:57
  • Si, ese era justamente el problema, ya esta solucionado.
    – PySanti
    Commented el 24 jul. 2023 a las 17:25

1 respuesta 1

1

**El problema que estás enfrentando con useEffect es que la función sendMail se ejecuta en un ciclo infinito de renderizado debido a que no has incluido las dependencias en el segundo argumento del useEffect.

Cuando proporcionas un arreglo vacío ([]) como segundo argumento del useEffect, le estás diciendo que la función de efecto solo se debe ejecutar una vez, después del primer renderizado. Sin embargo, la función sendMail actualiza el estado (setMailSended(true)) y, debido a que mailSended cambia, el efecto se ejecuta nuevamente, lo que a su vez vuelve a llamar a sendMail, creando un ciclo infinito.

Para solucionar esto, debes incluir mailSended como dependencia en el arreglo de dependencias del useEffect. Esto hará que el efecto se vuelva a ejecutar solo cuando mailSended cambie su valor. Aquí tienes el código modificado:**

useEffect(() => {
  if (!mailSended) {
    sendMail();
  }
}, [mailSended]);

**Con esta modificación, el efecto solo se ejecutará cuando mailSended cambie su valor de false a true. Esto asegurará que sendMail se ejecute una vez y no cause un ciclo infinito de renderizado.

Además, ten en cuenta que si sendActivationEmailAPI es una función asíncrona, es posible que también desees manejar los errores que pueda lanzar**

3
  • 1
    Asegúrate de no utilizar ChatGPT: está prohibido aquí.
    – tchrist
    Commented el 27 jun. 2023 a las 12:56
  • @juancruz Esa era una parte del problema, sin embargo, el problema principal es que el <StrictMode> de React ejecuta dos veces el useeffect en desarrollo.
    – PySanti
    Commented el 24 jul. 2023 a las 17:24
  • @PySanti si queres subi el codigo entero y lo miro en detalle!
    – juancruz
    Commented el 25 jul. 2023 a las 18:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.