Cuando uso else if para mostrar un mensaje de error, dice "nombre de usuario incorrecto" incluso cuando el nombre de usuario es correcto pero la contraseña es incorrecta. Excepto por el último nombre de usuario en la matriz "usuario".
Pero cuando elimino el else if no hace nada cuando un usuario ingresa el nombre de usuario incorrecto.
Creo que el ciclo for está creando ese problema. ¿Estoy usando el bucle equivocado para el propósito equivocado? ¿Qué tengo que hacer?
Enlace de Codesandbox https://codesandbox.io/s/nervous-moser-ybvwb3?file=/src/App.js:1066-1203
En primer lugar, no debería tener sus credenciales codificadas en el front-end de esa manera. Cualquiera podría simplemente leer el código y entrar.
Dicho esto, debe interrumpir el ciclo cuando se encuentra el nombre de usuario:
if (usernameState === user[i]) { if (passwordState === pass[i]) { setLoginState(true); setMessageState("Login successful."); } else if (passwordState === "") { setMessageState("Enter password."); passwordinput.current.focus(); } else { setMessageState("Wrong password."); passwordinput.current.focus(); } break; } De lo contrario, continuará procesando cada nombre de usuario ya que no se encontraron coincidencias. Realmente no usaría un bucle for para esto en absoluto. Primero debe verificar si hay una cadena vacía, luego buscar si el nombre de usuario está en su matriz, luego si lo está, verifique la contraseña. ¡Pero, de nuevo , no debería incrustar las credenciales en su código de front-end!