Reactjs 反应无阴影规则处理

我是个新手。我正在尝试创建第一个应用程序，应该处理登录。事实上，即使现在一切都正常，但我在第18行得到了没有阴影的eslint错误

这是我的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)

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从'react redux'导入{connect}；
从“vcc ui”导入{按钮、文本输入、徽标、块}；
从“../../redux/reducer”导入{login}；
从“./LoginForm styles”导入{styles}；
类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
onSubmit=（e）=>{
e、 预防默认值（）；
const{username，password}=this.state；
登录（用户名、密码）；
}
render（）{
const{username，password}=this.state；
const{isLoginPending，IsLoginAccess，loginError}=this.props；
返回(
this.setState（{username:e.target.value}）
/>
this.setState（{密码：e.target.value}）}
/>
登录
{isLoginPending&&Processing}
{isloginsucess&&Logged-In}
{登录错误&&用户名或密码不正确}
)
}
}
LoginForm.propTypes={
isLoginPending:PropTypes.bool，
IsLoginSAccess:PropTypes.bool，
登录错误：PropTypes.string，
登录名：PropTypes.func
};
LoginForm.defaultProps={
isLoginPending:false，
IsLoginSucess:false，
登录错误：“”，
登录：（）=>未定义
};
常量mapStateToProps=（状态）=>({
isLoginPending:state.isLoginPending，
IsLoginSAccess:state.IsLoginSAccess，
loginError:state.loginError，
})
const mapDispatchToProps=（调度）=>({
登录：（用户名，密码）=>dispatch（登录（用户名，密码））
})
导出默认连接（MapStateTrops、mapDispatchToProps）（LoginForm）

onSubmit函数未抛出任何阴影esling错误。请问我如何重写它或定义登录道具，使它不会抛出它

我知道登录在两个地方改变了它的值，但我不知道如何让它更“漂亮”

有人知道吗

---

谢谢。

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

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

...

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

---

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

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

...

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

---

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

顺便说一下，我认为您应该使用

这个.props.login（用户名、密码）而不是直接调用导入的操作创建者

你可以给映射函数取任何你喜欢的名字。例如：

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

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

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

顺便说一下，我认为您应该使用
这个.props.login（用户名、密码）而不是直接调用导入的操作创建者

你可以给映射函数取任何你喜欢的名字。例如：

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

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

所以问题是函数和道具名称是相同的？是的，这是正确的。您导入了一个名为
login
的函数，您可能正在使用
const{login}=this.props解构组件的props
，所以您实际上是用道具中的一个来覆盖导入的
登录名
。所以问题是函数和道具名称是相同的？是的，这是正确的。您导入了一个名为
login
的函数，您可能正在使用
const{login}=this.props解构组件的props
，因此您实际上是在用道具中的登录覆盖导入的
登录。