1

Voy a intentar ser lo más claro y detallado posible.

Tengo un componente en React que tiene dos estados:

 const [operationId, setOperationId] = useState(null)
 const [categoryId, setCategoryId] = useState(null)

Y tengo un form cuyo submit dispara tres funciones

<form onSubmit={handleSubmit}>

function handleSubmit (event) {
        event.preventDefault()
        checkSubmit();
        onSubmitData();
        setTimeout(updateData,9000)
    }

Las tres funciones del handler son las siguientes:

     function checkSubmit () {
        //Verifica si el arreglo de categorías está vacio, y si lo está crea una por default
        if (props.categories.data.length === 0) {
            axios.post("/categories/", category)
            return;
        }
        //En caso que haya categorías en el arreglo, compara si hay alguna existente. Caso afirmativo,
        //sale de la funcion, de otra forma realiza  un post con la nueva categoría.
        for (var i = 0; i < props.categories.data.length; i++) {

            if (props.categories.data[i].name === category.name) {
            setCategoryId(props.categories.data[i].id)
            return;
            } 
        }    
         axios.post("/categories/", category)
        .then(res => setCategoryId(res.data.id))
    }

     function onSubmitData () {
         axios.post("/operations", data)
        .then(res => setOperationId(res.data.operationId))
    }

     function updateData () {
        axios.post(`/operations/${operationId}/${categoryId}`)
        console.log("Recién ahora se hizo el dispatch")
        console.log("operationId dentro de updateData", operationId)
        console.log("categoryId dentro de updateData", categoryId)
    }

Mi problema es este: Todo funciona perfecto y se realizan las peticiones en las rutas correctamente hasta que llega a updateData.

Cuando intenta realizarse la peticion a la ruta ("/operations/${operationId}/${categoryId}"), operationId y categoryId siguen con los valores iniciales (null). Por tanto, se realiza una peticion a ("/operations/null/null"), lo que logicamente no funciona.

Sin embargo, fuera de la funcion, categoryId y operationId si tienen sus valores correspondientes. Simplemente que por alguna razon no llegan a la funcion, siendo que estas provienen directamente de los estados de React (operationId y categoryId toman sus valores una vez que se realizan las peticiones y el servidor responde. Ya probe miles de maneras, con setTime, sin setTime, async, await, etc, etc, pero siempre queda con el null.

Dejo captura de la consola del navegador

introducir la descripción de la imagen aquí

2 respuestas 2

1

El problema que tienes es al usar setTimeOut, te cito la documentación en la sección de El problema con "this".

El código ejecutado por setTimeout() corre en un contexto de ejecución diferente al de la función por la que fue llamado.

Esto significa que se pierde la referencia a las variables operationId y categoryId del componente de React, lo que se me ocurre es pasar cómo parámetros las referencias, es decir, hacer:

function handleSubmit (event) {
        event.preventDefault()
        checkSubmit();
        onSubmitData();
        setTimeout(updateData,9000,operationId,categoryId);
    }

De igual manera creo que una mejor solución sería encadenar las funciones directamente utilizando los then:

<form onSubmit={handleSubmit}>

function handleSubmit (event) {
        event.preventDefault()
        checkSubmit();
    }

function checkSubmit () {
        //Verifica si el arreglo de categorías está vacio, y si lo está crea una por default
        if (props.categories.data.length === 0) {
            axios.post("/categories/", category)
            return;
        }
        //En caso que haya categorías en el arreglo, compara si hay alguna existente. Caso afirmativo,
        //sale de la funcion, de otra forma realiza  un post con la nueva categoría.
        for (var i = 0; i < props.categories.data.length; i++) {

            if (props.categories.data[i].name === category.name) {
            setCategoryId(props.categories.data[i].id)
            return;
            } 
        }    
         axios.post("/categories/", category)
        .then(res => {setCategoryId(res.data.id),onSubmitData()})//Aqui encadenamos
    }

     function onSubmitData () {
         axios.post("/operations", data)
        .then(res => {setOperationId(res.data.operationId),updateData()})//Aqui también
    }

     function updateData () {
        axios.post(`/operations/${operationId}/${categoryId}`)
        console.log("Recién ahora se hizo el dispatch")
        console.log("operationId dentro de updateData", operationId)
        console.log("categoryId dentro de updateData", categoryId)
    }
2
  • No funcionó de esta manera sigue perdiendo la referencia. La unica solucion que se me ocurrio en el momento fue definir variables globales con window.categoryId y window.operationId y así funciono. Tal vez no haya sido la mejor solucion, pero fue lo unico que pude hacer funcionar. Te agradezco mucho tu ayuda! Un saludo!
    – Dami Monge
    Commented el 1 abr. 2021 a las 23:33
  • Que extraño! Hice pruebas para ver que funcionase y en mi computadora si lo corrió bien, y no pudiste encadenar las funciones? También podrías usar async/await para esperar que las primeras funciones finalicen.
    – FranAcuna
    Commented el 5 abr. 2021 a las 17:08
1

La respuesta del colega @FranAcuna me parece inteligible.

Otra opción puede ser usando useRef, de tal forma que al enviar la función updateData de setTimeout a la cola de ejecución, mantenga un trailing closure con las variables useRef.

Así, al regresar de la cola de ejecución después de n segundos, updateData tendrá la última captura de operationId y categoryId, esto debido al trailing closure.

Dejo un demo:

 function App() {
  const [operationId, setOperationId] = React.useState(null)
  const [categoryId, setCategoryId] = React.useState(null)
  const opIdRef = React.useRef(operationId);
  const catIdRef = React.useRef(categoryId);
  opIdRef.current = operationId;
  catIdRef.current = categoryId
  

  function handleSubmit(){
    setOperationId(300)
    setCategoryId(2)
    setTimeout(()=>{
      updateData(opIdRef.current, catIdRef.current);  
    }, 9000);
    
  }

  function updateData(operationId, categoryId){
    console.log("updateData regreso de cola de ejecucion con trailing closure");
    console.log("operationId: ",operationId)
    console.log("categoryId: ",categoryId)
  }
    return (
      <div>
        <button onClick={handleSubmit}>Click me</button>  
      </div>
    );
};

 
 ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Espero que esta respuesta sea de ayuda.

1
  • Al final la unica solucion que encontré fue utilizar variables globales con windows.categoryId y windows.operationId para que no se pierda la referencia. Seguramente no haya sido la solucion mas adecuada, pero fue la unca que se me ocurrio en el momento. No sabia de la existencia de useRef, tocará ver la proxima. Gracias por tu ayuda! Un saludo!
    – Dami Monge
    Commented el 1 abr. 2021 a las 14:45

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.