사용자 배열에 사용자가 있는지 확인

Question

React와 Redux를 사용하여 사용자 로그인 시스템을 만들려고합니다. 다음과 같이 실물 모형 데이터를 사용합니다.

const users = [ 
{ 
    "id":1, 
    "username":"user1", 
    "email":"user@hotmail.com", 
    "password":"1527393" 
}, 
{ 
    "id":2, 
    "username":"user2", 
    "email":"user2@hotmail.com", 
    "password":"1527393" 
} 
]; 


export default users; 

이 데이터는 기본 상태로 저장소에 추가됩니다. 다음과 같이 내 store.js 파일은 다음과 같습니다 REDUX에 연결되어

import {createStore, compose} from 'redux'; 
import rootReducer from '../reducers/index'; 

import userLoginReducer from '../data/users'; 

const defaultState = { 
    userLoginReducer 
}; 

export default function configureStore() { 
    return createStore(
     rootReducer, 
     defaultState, 
     compose(
      window.devToolsExtension ? window.devToolsExtension() : f => f //we use this line for chrome redux extension 
     ) 
    ); 
} 

내 로그인 구성 요소는 다음과 같습니다 페이지로드에

import React from 'react'; 
import LoginForm from './loginForm'; 

import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import * as actionCreators from '../../actions/actionCreators'; 

class Login extends React.Component { 

    constructor(props, context) { 
     super(props, context); 

     this.state = { 
      loginData: { 
       username: '', 
       password: '' 
      }, 
      errors: {} 
     }; 

     this.buttonClickHandle = this.buttonClickHandle.bind(this); 
     this.loginHandle = this.loginHandle.bind(this); 
    } 

    loginHandle(event) { 
     let field = event.target.name; 
     let value = event.target.value; 

     let loginData = this.state.loginData; 
     loginData[field] = value; 

     this.setState({loginData: loginData}); 
    } 

    buttonClickHandle(event) { 
     event.preventDefault(); 
     this.props.actions.userLoginSuccess(this.state.loginData.username, this.state.loginData.password); 

     if (this.props.users.length > 0) { 
      console.log("User exists. Go to the login page"); 
     } else { 
      console.log("User doesn't exists. Show error message"); 
     } 
    } 

    render() { 
     const language = this.props.currentLanguage; 
     return (
      <div className="container"> 
       <div className="row"> 
        <p className="col-lg-4 col-xs-12 col-md-4 loginTitle noPadding">{language.loginTitle}</p> 
        <div className="col-lg-8 col-xs-12 col-md-8 loginForm noPadding"> 
         <LoginForm currentLanguage={language} onClick={this.buttonClickHandle} 
            onChange={this.loginHandle} errors={this.state.errors}/> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state, ownProps) { 
    return { 
     users: state.userLoginReducer 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(actionCreators, dispatch) 
    }; 
} 


export default connect(mapStateToProps, mapDispatchToProps)(Login); 

내가 데이터 파일에서 두 사용자를 얻을. 괜찮아.

로그인 구성 요소의 buttonClickHandle 함수에서 나는 사용자 이름과 암호로 작업을 호출하고 감속기에서 반환 된 배열이 비어 있는지 확인하려고합니다. 비어있는 경우 state.errors를 업데이트하고 비어 있지 않으면 환영 페이지로 리디렉션합니다.

감속기에서 데이터를 필터링하고 action.username이있는 사용자가 있는지 확인한 다음 해당 배열을 내 로그인 구성 요소로 반환합니다.

export default function userLoginReducer(state = [], action) { 
    switch(action.type){ 
     case "USER_LOGIN_SUCCESS": 
      return [...state.filter(user => user.username === action.username)]; 
     default: 
      return state; 
    } 
} 

을하지만이 작동하지 않습니다 다음과 같이

감속기 코드입니다.

페이지로드시 user1 사용자 이름으로 양식을 제출하면 작동하지만 페이지가 user18과 같이로드 될 때 제출할 때도 작동합니다.

어떤 조언이 필요합니까?

Answer 1

문제는 사용자 존재 여부를 확인하기위한 코드가 올바르지 않다는 것입니다.

당신은 두 개체, this.props.users.length > 0 항상 true를 반환을 포함하여 users 객체에 대하여 당신의 검사를 가정

if (this.props.users.length > 0) { 
console.log("User exists. Go to the login page"); 
} else { 
console.log("User doesn't exists. Show error message"); 
} 

을 가지고 있지만. users에없는 사용자를 확인할 때도 마찬가지입니다.

실제 사용자 이름을 확인하는 방법을 indexOf 또는 includes 또는 그 이상으로 추가해야합니다. 예를 들어 다음과 같이 작동합니다.

const { users } = this.props; 

if (users.length > 0 && users.find(user => user.username === this.state.loginData.username)) { 
console.log("User exists. Go to the login page"); 
} else { 
console.log("User doesn't exists. Show error message"); 
}