0
229
VistasVerifique el nombre de usuario, la contraseña - Formulario de inicio de sesión usando React Hooks
Quiero crear un formulario de inicio de sesión con datos de matriz UsersData.js:
const users = [ { username: 'admin1', password: '12345678' }, { username:'admin2', password:'012345678' } ];y Login.js se parece a esto:
import React, {useState} from 'react'; import { users } from 'UsersData'; function Login() { const [data, setData] = useState({ username: '', password: '' }); const {uname, pass} = data; const checkUser = () => { const usercheck = users.find(user => (user.username === uname && user.password === pass)); if(usercheck) { console.log("Login successful"); }else { console.log("Wrong password or username"); } // console.log(uname); console.log(usercheck); } const changeHandler = (e) => { setData({...data, [e.target.name]:[e.target.value]}) } const handleSubmit = (e) => { e.preventDefault(); checkUser(); console.log(checkUser()); } return ( <div className="login-bg"> <div className="card"> <form className='loginForm' onSubmit={handleSubmit} > <div className="input-text"> <input type="text" name="username" value={uname} placeholder="Username" aria-describedby="inputGroupPrepend2" required onChange={changeHandler} /> </div> <div className="input-text"> <input type="password" name="password" value={pass} placeholder="Password" aria-describedby="inputGroupPrepend2" required onChange={changeHandler} /> </div> <div className="buttons"> <button type="submit" className="btn btn-warning btn-block"> Login </button> </div> </form> </div> </div> ) } export default Login;Entonces, el código anterior solo verifica si los campos de nombre de usuario y contraseña ingresados en el formulario coinciden con el nombre y la contraseña del registro único en la matriz de objetos de UsersData.js. El código anterior funciona bien. Escribí la función checkUser() pero el resultado es no es verdad.
Por favor, muestre un ejemplo de cómo se hace. Lo siento, soy nuevo en ReactJS, así que estoy un poco confundido, espero que puedas ayudar. Gracias
3 Respuestas
Responde la pregunta0
Oye, autumnha. Entonces, con la forma en que estás desestructurando, primero deben ser los valores que estás extrayendo de los datos obj.
Déjame saber si este es tu objetivo.
const { username, password } = dataahora tenemos el estado del componente local de nombre de usuario y datos
const checkUser = (users) => { const usercheck = users.find(user => (user.username === username && user.password === password)) return usercheck ? console.log('successfully logged in') : console.log('wrong credentials') }luego invocamos la función
checkUser(users)0
Creo que puedes usar map() y some() para lograr ese objetivo. Mientras verifica si uno de los usuarios está en la matriz, eso generará una matriz con verdadero y falso, como [falso, falso, verdadero], etc.
Por lo tanto, la solución más sencilla es mapear a través de los usuarios con sus valores de entrada y luego verificar la autenticación mediante some().
const onCheck = () => { const {uname, pass} = data; const isAuthenticated = users.map(user => user.username === uname && user.password === pass); return isAuthenticated.some(); } if(onCheck()) { console.log("Login successful"); }else { console.log("Wrong password or username"); }0
su lógica aquí tampoco es correcta, así es como debe ser el evento manejado
import { useEffect, useState } from "react"; import "./styles.css"; const users = [ { username: 'admin1', password: '12345678' }, { username:'admin2', password:'012345678' } ]; export default function App() { const [data, setData] = useState({ username: '', password: '' }); const changeHandler = (e) => { setData({...data, [e.target.name]: e.target.value}) } const checkUser = () => { const usercheck = users.find(user => (user.username === data.username && user.password === data.password)); if(usercheck) { console.log("Login successful"); }else { console.log("Wrong password or username"); } // console.log(uname); console.log(usercheck); } useEffect(() => { checkUser(users) }, [data.username, data.password]) console.log(data) return ( <div className="App"> <div className="input-text"> <input type="text" name="username" value={data.username} placeholder="Username" aria-describedby="inputGroupPrepend2" required onChange={changeHandler} /> </div> <div className="input-text"> <input type="password" name="password" value={data.password} placeholder="Password" aria-describedby="inputGroupPrepend2" required onChange={changeHandler} /> </div> </div> ); } 