2

Inicie a estudiar react y soy novato. Viendo un videotutorial; en el que se estan pasando valores del state, del hijo(NuevaCita.js) al padre(App.js) en un Class Component, a traves de una funcion llamada crearNuevaCita() para esto se crea un nuevo objeto const con una copia del state usando el spread operator asi: const nuevaCita = {...this.state.cita}; pero veo que luego se añade un valor id(este no estaba en el state) al objeto NuevaCita de la forma nuevaCita.id==uuid(); esto me causa una duda...

en vez de hacer funciones de tipo handleChange() y crear un nuevo state que puede ser algo un poco trabajoso, no seria mas eficaz crear un nuevo objeto tomar los valores de los campos del formulario añadirlos de la forma nuevaCita.mascota=document.querySelector('#mascota').value; y luego pasar este objeto al padre. Mi duda es que si siempre se deben utilizar el state para manipular los datos es por buenas practicas o por algo en particular.. Gracias y saludos

handleSubmit = (e) =>{
        e.preventDefault();

        //extraer los valores del state
        const {mascota, propietario, fecha, hora, sintomas} = this.state.cita;
        //validar que todos los campos esten llenos
        if(mascota === '' || propietario === '' || fecha==='' || hora ==='' || sintomas === ''){
            this.setState({
                error: true
            });
            //detener la ejecucion
            return;
        }
        //generar objeto con los datos
        const nuevaCita = {...this.state.cita};
        nuevaCita.id=uuid();
        console.log(nuevaCita);
        //agregar la cita al state de la app
        this.props.crearNuevaCita(nuevaCita);

pudiera ser asi y no cree el state y estoy pasandole el mismo objeto al padre:

//creo el objeto
const nuevaCitaPrueba={};

        //generar objeto con los datos
        nuevaCitaPrueba.mascota=document.querySelector('#mascota').value;
        nuevaCitaPrueba.propietario=document.querySelector('#propietario').value;
        nuevaCitaPrueba.fecha=document.querySelector('#fecha').value;
        nuevaCitaPrueba.hora=document.querySelector('#hora').value;
        nuevaCitaPrueba.sintomas=document.querySelector('#sintomas').value;

        //agregar la cita al state de la app
        this.props.crearNuevaCita(nuevaCitaPrueba)
2
  • Hola Israel, tu pregunta se puede mejorar añadiendo el código al que haces referencia para que sea mas fácil de entender lo que preguntas! Puedes usar este link editar para añadirlo. Un saludo :)
    – Capt.Teach
    Commented el 9 ago. 2019 a las 11:03
  • vale lo subo en un momento pero creo es algo mas bien teorico
    – RazerJs
    Commented el 9 ago. 2019 a las 11:04

1 respuesta 1

2

El mayor problema de tu aproximación es que estás usando programación imperativa en vez de declarativa. El principio básico de React es que tú le dices qué renderizar y él se encarga de hacerlo (a través de las props y el state del componente). Por eso, nunca debes acceder al DOM directamente (como se hace en Jquery o en javascript puro), React se encarga de hacerlo. Sé que al principio es muy tentador y lo natural es tender a ello porque es como estamos acostumbrados a programar pero una vez que visualizas la forma de trabajar de React es todo mucho más simple.

Si que es cierto que hay casos muy concretos en los que hay que acceder a elementos del DOM (más info aquí) pero son casos muy raros. Además, para ello se utiliza React.createRef(); si estás usando Class components o el hook useRef() si estás usando hooks (cosa que te recomiendo)

1
  • Gracias @Kiko_L entiendo es una cuestion de paradigma entonces.
    – RazerJs
    Commented el 9 ago. 2019 a las 21:04

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.