Question

我的反应很新。我正在尝试创建第一个应处理登录的应用程序。实际上，即使现在，一切都仍然有效，但是我在第18行出现了没有阴影的错误提示。

这是我的LoginForm控制器：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Button, TextInput, Logo, Block } from 'vcc-ui';
import { login } from '../../redux/reducer';
import { styles } from './LoginForm-styles';

class LoginForm extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    onSubmit = (e) => {
        e.preventDefault();
        const { username, password } = this.state;
        login(username, password);
    }

    render() {
        const {username, password} = this.state;
        const {isLoginPending, isLoginSuccess, loginError} = this.props;
        return (
            <Block
                extend={styles.loginWrapper}
                >
                <Block 
                    extend={styles.loginForm}
                >
                    <Block 
                        as="form" 
                        name="loginForm" 
                        onSubmit={this.onSubmit}
                    >
                        <Block 
                            extend={styles.loginLogo}
                        >
                            <Logo height="60"/>
                        </Block>
                        <Block 
                            extend={styles.loginInput}
                        >
                            <TextInput 
                                value={username} 
                                placeholder="username" 
                                type="text" name="username"
                                onChange={e => this.setState({username: e.target.value})}
                            />
                        </Block>
                        <Block
                            extend={styles.loginInput}
                        >
                            <TextInput
                                value={password} 
                                placeholder="password" 
                                type="password" 
                                name="password"
                                onChange={e => this.setState({password: e.target.value})}
                            />
                        </Block>
                        <Block
                            extend={styles.loginButton} 
                        > 
                        <Button
                            loading={isLoginPending}
                            variant="outline" 
                            type="submit"
                            fullWidth={["s","m","l"]}
                        >
                            Login
                        </Button>
                        </Block>
                        {isLoginPending && <div>Processing</div>}
                        {isLoginSuccess && <div>Logged In</div>}
                        {loginError && <div>Incorrect Username or Password</div>}
                    </Block>
                </Block>
            </Block>           
        )
    }
}

LoginForm.propTypes = {
    isLoginPending: PropTypes.bool,
    isLoginSuccess: PropTypes.bool,
    loginError: PropTypes.string,
    login: PropTypes.func
};

LoginForm.defaultProps = {
    isLoginPending: false,
    isLoginSuccess: false,
    loginError: "",
    login: () => undefined
};

const mapStateToProps = (state) => ({
        isLoginPending: state.isLoginPending,
        isLoginSuccess: state.isLoginSuccess,
        loginError: state.loginError,
    })

const mapDispatchToProps = (dispatch) => ({
        login: (username, password) => dispatch(login(username,password))
    })

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm)

onSubmit函数抛出无阴影的esling错误。请问我该如何重写它或定义登录道具，以便它不会抛出它？

我知道登录名以某种方式在2个地方改变了它的值，但是我不知道如何使它更“好”。

有人有主意吗？

谢谢。

Answer 1

您可以使用别名导入您的登录名：

import { login as reducerLogin } from '../../redux/reducer';

...

const mapDispatchToProps = (dispatch) => ({
    login: (username, password) => dispatch(reducerLogin(username,password))
})

Answer 2

当您有两个名称相同但作用域不同的变量时，会发生此错误。

顺便说一句，我相信您应该使用this.props.login(username, password);而不是直接调用导入的动作创建者。

您可以给映射函数指定任何您喜欢的名称。例如：

// At line 18
this.props.loginAction(username, password)

// Mapping action creator shortcut...
export default connect(mapStateToProps,{ loginAction: login })(LoginForm)

反应无阴影规则处理

2 个答案: