ユーザーがユーザーのアレイに存在するかどうかを確認する

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

問題は、ユーザーが存在するかどうかをチェックするためのコードが正しくないことです。

あなたは

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"); 
} 

を持っている。しかし、this.props.users.length > 0は常にtrueを返し、2つのオブジェクトが含まれているあなたのusersオブジェクトに対するあなたのチェックを仮定。 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"); 
}