在 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.target

this.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 = [&nbsp; &nbsp; { id: 0, name: 'user1', password: 'asd1' },&nbsp; &nbsp; { id: 0, name: 'user2', password: 'asd2' },&nbsp; &nbsp; { id: 0, name: 'user3', password: 'asd3' },];那么你postDetails需要看起来像这样：import { users } from '...';// ...postDetails() {&nbsp; &nbsp; const isUserValid = users.some(user => {&nbsp; &nbsp; &nbsp; &nbsp; const username = this.state.userName;&nbsp; &nbsp; &nbsp; &nbsp; const password = this.state.password;&nbsp; &nbsp; &nbsp; &nbsp; return user.name === username && user.password === password;&nbsp; &nbsp; });&nbsp; &nbsp; this.setState({ message: isUserValid });};

Answer 2

有一个功能，它首先尝试找到一个用户，然后如果我们找到具有相同名称的对象，我们检查密码。如果某些内容无效，则该函数返回 false，否则返回 trueconst users =[&nbsp; {id:1,name:"mahesh",password:"mahesh123"},&nbsp; {id:2,name:"abc",password:"abc123"}]const validation = (login, password) => {&nbsp; const user = users.find(user => login === user.name) // find the user with same name&nbsp; if (typeof user !== 'undefined') { // check the user. If we didn't find a object with same name, user will be undefined&nbsp;&nbsp; &nbsp; return user.password === password // if passwords match it returns true&nbsp; }&nbsp; return false}console.log(validation('mahesh', 'mahesh123'))console.log(validation('abc', 'abc123'))console.log(validation('abc', 'sffh'))console.log(validation('abdsawec', 'abc123'))