在 ReactJS 中映射对象数组以创建登录表单

Question

我目前正在尝试在 ReactJS 中创建一个登录表单（它没有任何后端并且依赖于 Users.js 文件进行输入。我的 App.js 看起来像这样：import React from 'react';import myUser from './User'import './App.css';class App extends React.Component{constructor(){super()this.state={userName:"",password:"",message:false} //myUser:[]this.eventHandler=this.eventHandler.bind(this)this.postDetails=this.postDetails.bind(this)}eventHandler(event){const {name,value}=event.targetthis.setState({[name]:value})}postDetails(event){ event.preventDefault()return(this.state.userName===myUser.name&&this.state.password===myUser.password? this.setState({message:true}):this.setState({message:false}))}render(){return(  <div className="main-div">    <h1>{this.state.message===true?"Success":"Try again"}</h1>    <form>           <input type="text" placeholder="enter name" name="userName"  onChange={this.eventHandler} />      <br />      <br />      <input type="password" placeholder="enter password" name="password"  onChange={this.eventHandler} />      <br />      <br/>      <button value="submit" onClick={this.postDetails}>Submit</button>    </form>       </div>)}}export default App;我的 User.js 看起来像这样：const users ={id:1,name:"mahesh",password:"mahesh123"}export default users所以上面的代码只检查表单中输入的用户名和密码字段是否与 User.js 对象数组中单条记录的名称和密码匹配上面的代码工作正常。但是如果我想制作一个对象数组怎么办，假设：const users =[{id:1,name:"mahesh",password:"mahesh123"},{id:2,name:"abc",password:"abc123"}]并想比较多个记录？我必须使用映射吗？请举例说明它是如何完成的。请帮忙，我是 React 的新手。我为格式道歉。

Answer 1

习惯最常见的数组原型方法（如.some()）将有助于解决这类问题。

export const users = [

    { id: 0, name: 'user1', password: 'asd1' },

    { id: 0, name: 'user2', password: 'asd2' },

    { id: 0, name: 'user3', password: 'asd3' },

];

那么你postDetails需要看起来像这样：

import { users } from '...';

// ...

postDetails() {

    const isUserValid = users.some(user => {

        const username = this.state.userName;

        const password = this.state.password;

        return user.name === username && user.password === password;

    });

    this.setState({ message: isUserValid });

};

Answer 2

有一个功能，它首先尝试找到一个用户，然后如果我们找到具有相同名称的对象，我们检查密码。如果某些内容无效，则该函数返回 false，否则返回 true

const users =[

  {id:1,name:"mahesh",password:"mahesh123"},

  {id:2,name:"abc",password:"abc123"}

]

const validation = (login, password) => {

  const user = users.find(user => login === user.name) // find the user with same name

  if (typeof user !== 'undefined') { // check the user. If we didn't find a object with same name, user will be undefined 

    return user.password === password // if passwords match it returns true

  }

  return false

}

console.log(validation('mahesh', 'mahesh123'))

console.log(validation('abc', 'abc123'))

console.log(validation('abc', 'sffh'))

console.log(validation('abdsawec', 'abc123'))