Saltar al contenido

React.js, ¿esperar a que termine setState antes de activar una función?

Ya no tienes que indagar más en otras webs ya que has llegado al espacio perfecto, contamos con la respuesta que buscas pero sin liarte.

Solución:

setState() tiene un parámetro de devolución de llamada opcional que puede usar para esto. Solo necesita cambiar su código ligeramente, a esto:

// Form Input
this.setState(
  
    originId: input.originId,
    destinationId: input.destinationId,
    radius: input.radius,
    search: input.search
  ,
  this.findRoutes         // here is where you put the callback
);

Fíjate en la llamada a findRoutes ahora está dentro de la setState() call, como segundo parámetro.
Sin () porque estás pasando la función.

       this.setState(
        
            originId: input.originId,
            destinationId: input.destinationId,
            radius: input.radius,
            search: input.search
        ,
        function()  console.log("setState completed", this.state) 
       )

esto podría ser útil

Según los documentos de setState() es posible que el nuevo estado no se refleje en la función de devolución de llamada findRoutes(). Aquí está el extracto de React docs:

setState() no muta inmediatamente this.state sino que crea una transición de estado pendiente. Acceder a this.state después de llamar a este método puede potencialmente devolver el valor existente.

No hay garantía de funcionamiento síncrono de las llamadas a setState y las llamadas pueden agruparse para mejorar el rendimiento.

Así que esto es lo que te propongo que hagas. Deberías pasar los nuevos estados. input en la función de devolución de llamada findRoutes().

handleFormSubmit: function(input)
    // Form Input
    this.setState(
        originId: input.originId,
        destinationId: input.destinationId,
        radius: input.radius,
        search: input.search
    );
    this.findRoutes(input);    // Pass the input here

Él findRoutes() La función debe definirse así:

findRoutes: function(me = this.state) 

Sección de Reseñas y Valoraciones

Te invitamos a sostener nuestro análisis fijando un comentario y puntuándolo te damos la bienvenida.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *