• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

187
Views
¿Cómo deshabilitar el botón de inicio de sesión cuando una solicitud de API ya está en curso en React?

Tengo este código para iniciar la sesión de los usuarios. Actualmente, cuando presiono iniciar sesión, el botón permanece activo. Lo que quiero es deshabilitar el botón cuando se hace clic en el inicio de sesión y la solicitud actual está en curso. Intenté usar el estado que inicialmente es falso, y cuando hago clic en el botón se vuelve verdadero. Y cuando se realiza la carga, vuelve a ser falso. Pero realmente no funcionó o tal vez lo hice de manera incorrecta.

Aquí está el código:

 import api from '../services/api' import { useState } from 'react' import { Link, useNavigate } from 'react-router-dom' import { validateFormDataForLogin } from '../validate' export default function LoginPage() { // form state const [formData, setFormData] = useState({ 'email': '', 'password': '', }) // using navigate const navigate = useNavigate() // function to handle the changes function handleChange(e) { // getting the required values const { name, value } = e.target // setting the state setFormData(prevFormData => ({ ...prevFormData, [name]: value, })) } // function to handle the submit async function handleSubmit(e) { // preventing page reload e.preventDefault() // validating the data const errorMessage = validateFormDataForLogin(formData) // if there is an error message then show that error message if (errorMessage) { alert(errorMessage) return } // if there is no error message then try to login the user try { // making a request for login await api.post('/api/user/login', { email: formData.email, password: formData.password, }) // redirect the user to the dashboard once logged in navigate('/dashboard', { replace: true, // so that when we hit back, we don't go to the login page again, and goes to the page before login }) } catch (error) { // alerting the error if (error.response) { alert(error.response.data.message) } } } return ( <div className='login'> <h1 className='login--title'>Login</h1> <div className='login--content'> <form className='login--form' onSubmit={handleSubmit}> <input type='text' className='login--form--input' placeholder='Email address' name='email' value={formData.email} onChange={handleChange} /> <input type='password' className='login--form--input' placeholder='Password' name='password' value={formData.password} onChange={handleChange} /> <p className='login--form--forgot_password'>Forgot Password</p> <input className='login--form--submit' type='submit' value='LOGIN' /> </form> <div className='login--row'> <span className='login--row--text'>Don't have an account?</span> <Link to='/register' className='login--row--link'>Register</Link> </div> </div> </div> ) }

Cualquier ayuda será apreciada.

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Puede realizar un seguimiento del estado de carga en un estado separado:

 const [isLoading, setIsLoading] = useState(false) async function handleSubmit(e) { setIsLoading(true) /* ... */ try { // making a request for login await api.post('/api/user/login', { email: formData.email, password: formData.password, }) setIsLoading(false) /* ... */ } catch (error) { setIsLoading(false) /* ... */ } }

Luego, deshabilite el botón Enviar si isLoading es verdadero:

 <input type="submit" disabled={isLoading} />
almost 3 years ago · Juan Pablo Isaza Report

0

pseudocódigo

  1. Puede usar una variable de estado para almacenar la desactivación/activación del botón. el valor predeterminado es falso. digamos que la variable es isDisabled . Como const [isDisabled, setIsDisabled] = useState(false)

  2. Use esa variable en la validación condicional en el botón como

    <input className='login--form--submit' type='submit' value='LOGIN' disabled={isDisabled}

  3. Debe mantener actualizado el estado de la variable mientras realiza su solicitud de API / en caso de éxito o falla

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error