Quiero crear un formulario de inicio de sesión con datos de matriz:
const users = [ { username: 'admin1', password: '12345678' }, { username:'admin2', password:'012345678' } ];y Login.js se parece a esto:
import React from 'react'; class Login extends React.Component { constructor(props) { super(props); this.state = { userName: "", password: "" }; } changeInputValue(e) { this.setState({ [e.target.name]: e.target.value }); } validationForm() { let returnData = { error : false, msg: '' } const {password} = this.state //Check password if(password.length < 8) { returnData = { error: true, msg: 'Password must be more than 8 characters' } } return returnData; } submitForm(e) { e.preventDefault(); const validation = this.validationForm() var username = e.target.elements.username.value; var password = e.target.elements.password.value; if (validation.error) { alert(validation.msg) }else if(username === 'admin1' && password === '12345678') { alert("Login successful"); }else { alert("Wrong password or username"); } } render() { return ( <div className="container" style={{ paddingTop: "5%" }}> <form onSubmit={e => { this.submitForm(e); }} > <div className="form-group"> <input type="text" className="form-control" name="username" placeholder="Username" onChange={e => this.changeInputValue(e)} /> </div> <div className="form-group"> <input type="password" className="form-control" name="password" placeholder="Password" onChange={e => this.changeInputValue(e)} /> </div> <button value="submit" className="btn btn-primary" onClick={this.postDetails}> Submit </button> </form> </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 User.js. El código anterior funciona bien. No sé cómo verificar el nombre de usuario y la contraseña de la matriz pasada.
Quiero usar el mapa () para verificar el nombre de usuario y la contraseña. 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
Puede usar el método .some() .
documento: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
Algo como esto
var username = e.target.elements.username.value; var password = e.target.elements.password.value; if(users.some((elem) => elem.username === username && elem.password === password)) { // when authentication is valid } else { // not a valid username / password }Puedes usar buscar
const user = users.find(user => (user.username === username && user.password === password)) if(user){ //correct user } if(!user) { //incorrect }