1

Tengo una funcion getOperation() y adentro de la misma la funcion getCategories(). En getOperation() traigo los datos de una operacion y seteo a la variable idCategory con el id de la categoria de la operacion. Y en getCategories() cuando hago el foreach llamo a la variable idCategory para hacer la comparacion, pero esta vacia.

introducir la descripción de la imagen aquí

const EditOperation = () => {

 const [stateCategories, setStateCategories] = React.useState([]);
 const [idCategory, setIdCategory] = React.useState("");
 const [user, setUser] = React.useState("");
 const [operation, setOperation] = React.useState([]);
 const { id } = useParams();
 const [catName, setCatName] = React.useState("");
 let operationService = new OperationsService();
 let categoryService = new CategoryService();
 
 eact.useEffect(() => {
   console.log("URL id_operation: " + id);
   if(localStorage.getItem("user") !== null) {
     setUser(localStorage.getItem("user"));
   }
   getOperation();
 }, []);
 
 const getOperation = () => {
    const data = operationService.getOperation(id);
    data.then((res) => {
      console.log("OPERATION DATA:");
      console.log(res);
      setOperation(res);
      // seteando la variable idCategory
      setIdCategory(res[0].category);
      getCategories();
    });
  };
  
  const getCategories = () => {
    const data = categoryService.getCategories();
    // aca el idCategory no lo muestra por consola
    console.log("idCategory hook: " + idCategory);
    data.then((res) => {
      let categories = res;
      setStateCategories(categories);

      // aca nunca muestra el mensaje del console.log
      categories.forEach((item) => {
        if (item.id === idCategory) {
          console.log("Nombre de categoria " + item.name);
          setCatName(item.name);
        }
      });

      const result = categories.filter(function (obj) {
        return obj.id !== idCategory;
      });
      
      setStateCategories(result);

    });
  };

}

Si hago todo en la funcion getOperations() de esta forma, si funciona:

 const getOperation = () => {
    const data = operationService.getOperation(id);
    data.then((res) => {
      console.log("OPERATION DATA:");
      console.log(res);
      setOperation(res);
      setIdCategory(res[0].category);
      //getCategories();
      //////////////////////////////////////////////
      const idCat = res[0].category;
      const data = categoryService.getCategories();
      data.then((res) => {
        //console.log(res);
        let categories = res;

        categories.forEach((item) => {
          if (item.id === idCat) {
            console.log("Nombre de categoria: " + item.name);
            setCatName(item.name);
          }
        });
        // returning the objects with the condition
        const result = categories.filter(function (obj) {
          return obj.id !== idCat;
        });
        setStateCategories(result);
        //setLoading(true);
      });
      ////////////////////////////////////////////////
    });
  };

3
  • Podría deberse a qué cuando llamas a getCategories() luego de setIdCaregory aún no se actualiza el valor de idCategory. Intenta usar a useEffect para llamar a getCategories ()
    – davidbug
    el 28 may. 2021 a las 17:30
  • Gracias por responder, llamo a getCategories en el useEffect() y tampoco funciona
    – Claudio
    el 28 may. 2021 a las 18:16
  • Quise decir en otro useEffect, React.useEffect(() => { if(idCategory !== ' ') { getCategories () } }, [idCategory]);
    – davidbug
    el 28 may. 2021 a las 18:47

1 respuesta 1

0

Como ya te estuvieron diciendo en los comentarios, estás teniendo un problema de sincronización entre el seteado del estado idCategory y las llamadas de tus funciones getOperation() y getCategories().

La raíz del problema viene de un error muy común al utilizar React que es creer que cuando seteamos un estado, este se actualiza inmediatamente.

Este caso demuestra que efectivamente no es así porque al utilizar el estado idCategory en todas tus funciones, este va a tener su valor inicial que le pusiste al inicializarlo con React.useState("");, osea un string en blanco.

Por lo tanto, mi recomendación para solucionar este problema es que intentes pasarle el valor de idCategory como argumento en la función en donde necesites usarlo.

Por ejemplo podrías tratar de hacer algo como esto:

Dentro de getOperation(), en vez de hacer el setIdCategory(res[0].category); se lo pasas directamente a la función así: getCategories(res[0].category);.

Luego lo recibes como parámetro de esta forma: const getCategories = (idCategory) => { ...

Haciendo esos cambios, todo el código se vería así:

const EditOperation = () => {

const [stateCategories, setStateCategories] = React.useState([]);
const [idCategory, setIdCategory] = React.useState("");
const [user, setUser] = React.useState("");
const [operation, setOperation] = React.useState([]);
const { id } = useParams();
const [catName, setCatName] = React.useState("");
let operationService = new OperationsService();
let categoryService = new CategoryService();

react.useEffect(() => {
console.log("URL id_operation: " + id);
if(localStorage.getItem("user") !== null) {
    setUser(localStorage.getItem("user"));
}
getOperation();
}, []);

const getOperation = () => {
    const data = operationService.getOperation(id);
    data.then((res) => {
    console.log("OPERATION DATA:");
    console.log(res);
    setOperation(res);
    // no seteamos el estado
    //setIdCategory(res[0].category);
    //le pasamos el res[0].category directamente como argumento a getCategories()
    getCategories(res[0].category);
    });
};

//Lo recibimos como parámetro ↓ acá  
const getCategories = (idCategory) => {
    const data = categoryService.getCategories();
    console.log("idCategory hook: " + idCategory);
    data.then((res) => {
    let categories = res;
    setStateCategories(categories);

    categories.forEach((item) => {
        if (item.id === idCategory) {
        console.log("Nombre de categoria " + item.name);
        setCatName(item.name);
        }
    });

    const result = categories.filter(function (obj) {
        return obj.id !== idCategory;
    });
    
    setStateCategories(result);

    });
};

}
5
  • Gracias @Desarrollos-web-Urquiza por tu aporte, acabo de subir a la publicación una forma que si me funciona, la cual es hacer toda la lógica en la función getOperations(), lo que pasa es que la idea es tener dos funciones por aparte para que sea mas legible el codigo.
    – Claudio
    el 28 may. 2021 a las 18:23
  • Ok. Tu solución funciona porque no estás dependiendo del estado desactualizado idCategory, si no más bien de idCat que ya está dentro de la misma función y sí tiene dentro los datos que necesitas. Si te parece que es necesario que ambas funciones estén separadas podrías intentar hacer lo que digo en mi respuesta, y si no funciona lo dejas todo en la misma función. el 28 may. 2021 a las 18:37
  • 1
    to solucion me genera una duda, en getOperation() obtengo la respuesta del servicio, sin embargo vos le estas pasando como argumento res[0].category antes de tener la respuesta del servicio.
    – Claudio
    el 28 may. 2021 a las 18:43
  • Es verdad. Ahí cometí un error. Ahora edito mi respuesta para explicar mejor lo que quise decir. el 28 may. 2021 a las 18:52
  • 1
    tu respuesta editada funciona! gracias por tu aporte!
    – Claudio
    el 28 may. 2021 a las 19:31

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.