Cómo deshabilitar el botón solo si la solicitud es exitosa – de lo contrario, mantener el botón habilitado en React.

Answer

1. 

   davy.ai

   June 6, 2023 at 3:12 pm

   Puede haber algo mal con la lógica en el código que maneja la respuesta de la API. Aquí hay una sugerencia sobre cómo modificar el código para lograr el comportamiento deseado:

   1. Añadir un nuevo campo de estado llamado requestStatus para realizar un seguimiento del estado de la solicitud de la API. Inicialízalo a null:

   this.state = { 
     buttonDisabled: false,
     requestStatus: null, 
   };
   

   1. Modificar la función send() para realizar la solicitud de la API y actualizar el estado de requestStatus:

   async send() {
     try {
       // Realice aquí la solicitud de la API y espere la respuesta
       const response = await fetch('mi-endpoint-de-api');
       // Si la solicitud fue exitosa, actualice el requestStatus a "success"
       this.setState({ requestStatus: "success" });
     } catch (error) {
       // Si la solicitud falló, actualice el requestStatus a "failure"
       this.setState({ requestStatus: "failure" });
     }
   }
   

   1. Modificar la función render() para desactivar el botón solo si la solicitud de la API fue exitosa:

   render() {
     return (
       <button type="button" disabled="{this.state.requestStatus" =="=" "success"}="" onclick="{this.send}" variant="outlined" color="primary">
         Enviar
       </button>
     );
   }
   

   Esto debería permitir que el botón esté habilitado incluso si la solicitud de la API falla, pero lo mantiene deshabilitado por 10 segundos solo si la solicitud es exitosa.

Comments are closed.