реагировать на обработку правил без тени

Question

Я новичок в реакции. Я пытаюсь создать первое приложение, которое должно обрабатывать логин. На самом деле все работает даже сейчас, но я получаю ошибку eslint без тени на строке 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 генерирует ошибку без тени. Пожалуйста, как я могу переписать его или определить реквизит для входа, чтобы он не бросал его?

Я знаю, что логин как-то меняет свое значение в 2 местах, но я не знаю, как сделать его более "красивым", скажем так.

У кого-нибудь есть идеи?

Спасибо.

Answer 1

Эта ошибка возникает, когда у вас есть две переменные с одинаковым именем, но разной областью действия.

Кстати, я считаю, что вы должны использовать this.props.login(username, password); вместо прямого вызова создателя импортированных действий.

Вы можете присвоить сопоставленной функции любое имя, какое захотите. Например:

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

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

Answer 2

вы можете импортировать ваш логин с псевдонимом:

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

...

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