reactjs - 我正在尝试创建一个基本登录。但以下代码不起作用

Question

setState 没有更新 的值isCurrectLogin。

import React, { Component } from 'react';
import UserRecords from './UserRecords.json'

json文件有以下记录：

[
    {
        "id" : 1,
        "userName" : "Bala",
        "password" : "123"
    },
    {
        "id" : 1,
        "userName" : "John",
        "password" : "456"
    },
    {
        "id" : 1,
        "userName" : "Ram",
        "password" : "789"
    },
    {
        "id" : 1,
        "userName" : "Peter",
        "password" : "1011"
    }
]

我提取类组件。

export default class UserLogin extends Component {


constructor(){
    super();

    this.state = {
      currentUser : "",
      currentPassword : "",
      isCurrectLogin : false,
    }
}

loginClickHandler = () => {
  UserRecords.map((d)=>{
    for(var i = 0; i < UserRecords.length; i++){

      if(UserRecords[i].userName == "Bala"){
        this.setState({isCurrectLogin : true})
      } else {
        this.setState({isCurrectLogin : false})
      }
    }

  })


  if (this.state.isCurrectLogin) {
    alert("user name is correct")
  } else {
    alert("User name is wrong")
  }

 }

render(){
    return(
        <div>
          <Button onClick = {this.loginClickHandler}> Login  </Button>
        </div>
    )
  }
}

请帮助我找到我错过的代码。

非常感谢。

标签： reactjs

Answer 1

请检查这是否适合您

const UserRecords = [
    {
        "id" : 1,
        "userName" : "Bala",
        "password" : "123"
    },
    {
        "id" : 1,
        "userName" : "John",
        "password" : "456"
    },
    {
        "id" : 1,
        "userName" : "Ram",
        "password" : "789"
    },
    {
        "id" : 1,
        "userName" : "Peter",
        "password" : "1011"
    }
]
let isCurrectLogin = false
loginClickHandler = () => {
      const username = "Peter"
      isCurrectLogin = UserRecords.filter(element => {
        if (element.userName === username) {
          return true
        }else{
          return false
        }
      });

  if (isCurrectLogin) {
    alert("user name is correct")
  } else {
    alert("User name is wrong")
  }
}

loginClickHandler()