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文件如下：

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

我连接到redux的登录组件是：

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

在页面加载中，我从数据文件中获取这两个用户。没关系。

在Login组件的buttonClickHandle函数中，我使用用户名和密码调用一个动作，我想检查reducer中返回的数组是否为空。如果它是空的，我会更新state.errors，如果它不是空的，我会重定向到欢迎页面。

在reducer中我过滤数据并检查具有action.username的用户是否存在，并将该数组返回到我的Login组件。

reducer代码如下：

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

但是，假设您检查包含两个对象的users对象，this.props.users.length > 0将始终返回true。即使您检查的用户不在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");
}

检查用户数组中是否存在用户

1 个答案: