0

estoy aprendiendo React y me encuentro trabado al momento de actualizar el valor de una variable. Como verán la porción de código es simple, pero no estoy entendiendo porque no me está modificando el valor de la variable doctorEmail (es decir, el "setDoctorEmail" no realiza ningún cambio), lei en la documentación, vi ejemplos, pero aún asi no consigo dar con la respuesta. Cabe aclarar que a searchDataDoctor le añadí los valores manualmente para probar una llamada a un servidor que responde correctamente ( el fetch ({id_user: "75", user_name: "Joaco", user_surname: "Petros", user_email: "[email protected]"....}) ), y Firebase también retorna el resultado esperado. Les agradecería si pueden ayudarme.

Tengo definido lo siguiente:

// context.js
    import React, { useEffect, useState } from "react";
    import app from "./firebase";
    import Cargando from "../components/Cargando";
    
    export const Auth = React.createContext();
    
    export const AuthContext = ({ children }) => {
      const [usuarioGoogle, setUsuarioGoogle] = useState(null);
      const [showChild, setShowChild] = useState(false);
      const [doctorEmail, setDoctorEmail] = useState();
      const [searchDataDoctor, setSearchDataDoctor] = useState({
        action: "checkDrLoginWithWeb",   
        user_email: "[email protected]",    
        flavor: "local",
      });
    
      useEffect(() => {
        app.auth().onAuthStateChanged(function (user) {
          setUsuarioGoogle(user);      
          if (user !== null) { 
           checkDr(searchDataDoctor);
    
          } else {
            //console.log("user es igual a null");
          }
        });
    
        const checkDr = async (searchDataDoctor) => {  
          var url = "https://direccion...";
    
          await fetch(url, {
            method: "POST", // or 'PUT'
            body: JSON.stringify(searchDataDoctor), 
            headers: {
              "Content-Type": "application/json",
            },
          })
            .then( async (res) => await res.json())
            .catch((error) => console.error("Error:", error))
            .then((response) => {
              if (response.state === "Success") {            
                handleAddDoctor(response.message)
      
              } else {
                console.log("NO ES success");      
              }
            });
        };  
      
    

   const handleAddDoctor = (dataDoctor) => {    
       console.log('user_email  ', dataDoctor.user_email) // [email protected]
       setDoctorEmail(dataDoctor.user_email)
       console.log('nuevo valor de doctor  ', doctorEmail) // continua 'hola'
        }
    
    setShowChild(true);
    
      }, []);
    
      if (!showChild) {
        return <Cargando />;
      } else {
        return (
          <Auth.Provider
            value={{
              usuarioGoogle,
            }}
          >
            {children}
          </Auth.Provider>
        );
      }
    };
3
  • Entonces con los valores manuales, sí funciona, saludos.
    – g.4
    el 3 mar. 2021 a las 6:27
  • 1
    La respuesta de @KiKo_L es clara, hay que revisar los conceptos de asincronía en ReactJS, aquí hay dos respuestas en donde se explica algo del ciclo de vida de un componente Ciclo de Vida A, Ciclo de Vida B, saludos
    – g.4
    el 3 mar. 2021 a las 19:29
  • Muchas gracias, me hicieron dar cuenta de que es tal cual como dicen.
    – Luis Gerez
    el 5 mar. 2021 a las 0:34

1 respuesta 1

4

La respuesta rápida es que sí que te lo está cambiando. Hay algo vital que tienes que entender del useState: los setters que genera pueden ejecutarse de forma asíncrona (+info). Es decir, en este bloque de código:

console.log('user_email  ', dataDoctor.user_email) // [email protected]
setDoctorEmail(dataDoctor.user_email)
console.log('nuevo valor de doctor  ', doctorEmail) // continua 'hola'

Cuando llegues al último console.log, el valor no se ha seteado aún ya que lo hace de forma asíncrona. Te recomiendo que eches un vistazo a la documentación sobre el ciclo de vida de React (aquí) para entender exactamente cómo funciona el renderizado en React.

1
  • Muchas gracias Kiko, es tal cual como dices, ya estoy usando el nuevo valor en otro componente. Gracias,
    – Luis Gerez
    el 5 mar. 2021 a las 0:35

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.