1

Lo que quiero hacer es entregar math.random como argumento a mi función "NombreAleatorio", para que genere un numero aleatorio entre 1 y 4, el cual estoy intentando guardar en la variable Number, la cual pretendo entregar a mi arreglo Nombres, para que así al hacer un return de mi arreglo, me devuelva el nombre que concuerde con el valor de Number. El problema que tengo es que si hago un console log de mi variable Number, y hago un console log de Nombres[Number], sus valores coinciden bien, PERO cuando intento hacer un return de Nombres[Number] me devuelve un nombre que no coincide para nada con los console.log. Es importante para mi generar un numero aleatorio que pueda guardar en una variable, y que no cambie ! pues necesito usarlo después para otras cosas, sin embargo esto solo me funciona dentro de mi función, pues cuando lo uso para hacer un return, me devuelve otros valores.

const Componente = () => {

    const Nombres = ["Alvaro", "Juan", "Paula", "Valentina"];

    let NombreAleatorio = (val) => {
        let Number = "";
        if(val === 1){
            Number = 0;
        }else if(val === 2){
            Number = 1;
        }else if(val === 3){
            Number = 2;
        }else if(val === 4){
            Number = 3;
        }else{Number = 0;}
        console.log(Number);
        console.log(Nombres[Number]);
        return Nombres[Number];
    }

    return ( 
        <div>
            {NombreAleatorio(Math.floor(Math.random() * 4))}
        </div>
     );
}
 
export default Componente;
1
  • Hice la prueba con el puro código js, y si me regresa el nombre en los dos resultados. el 5 nov. 2021 a las 2:53

1 respuesta 1

0

En ReactJS, se debe programar siguiendo el ciclo de vida del componente

En este caso, no hay un estado que represente el nombre que se quiere mostrar en el DOM. ReactJS no tiene control sobre ese estado, no puede sincronizar con el DOM.

Además, se esta llamando/invocando a una función en render time (es decir dentro del DOM):

return ( 
        <div>
            {NombreAleatorio(Math.floor(Math.random() * 4))}
        </div>
     );

Este patrón no es válido, pues puede haber problemas del tipo too many re-renders o bugs como el que se muestra en la pregunta.

Definir un estado y devolver después de montar el componente

Se puede declarar un estado para nombres:

const [nombre, setNombre] = useState("");

Luego, usar useEffect para ejecutar la función que computa el índice del nombre que será seleccionado:

useEffect(()=>{
      NombreAleatorio(Math.floor(Math.random() * 4));
    }, [NombreAleatorio]);

Entonces, como se hace un set al estado nombre dentro de NombreAleatorio:

function NombreAleatorio(val) {
      console.log("val",val);
      
        let Number = "";
        if(val === 1){
            Number = 0;
        }else if(val === 2){
            Number = 1;
        }else if(val === 3){
            Number = 2;
        }else if(val === 4){
            Number = 3;
        }else{Number = 0;}
        console.log(Number);
        console.log(Nombres[Number]);
        setNombre(Nombres[Number])
        //return Nombres[Number];
    }

se devuelve el componente (re-render) y se pinta el estado de nombre en el DOM (render time):

return ( 
        <div>
            {nombre}
        </div>
     );

Se esta respetando el ciclo de vida del componente; el estado nombre, tiene el mismo valor tanto en el DOM, como en el scope JS del componente, la reactividad de estados ya esta sincronizada en el DOM.

Espero que esta respuesta sea de ayuda.

Ciclo de vida del componente reactJS

Tu Respuesta

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

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