Разрушение реквизита

Question

У меня есть некоторые проблемы с eslint в реакции. Он просит меня использовать деструктурирующее назначение реквизита, но когда я меняю код, он ломается.

Есть идеи?

Это полный код

class LoginPage extends React.Component {
  submit = data =>

    // This is how I tried to fix it!
    // {
    //   const { login, history } = this.props;
    //   login(data).then(() => history.push('/'));
    // };

    // This is what I have, its working but eslint is complaining.
    this.props.login(data).then(() => this.props.history.push('/'));

  render() {
    return (
        <div>
            <h1>Login Page</h1>
            <LoginForm submit={this.submit} />
        </div>
    );
  }
}

LoginPage.propTypes = {
  history: PropTypes.shape({
    push: PropTypes.func.isRequired
  }).isRequired,
  login: PropTypes.func.isRequired /* eslint-disable-line */
};

export default connect(
  null,
  { login }
)(LoginPage);

Ошибка, которую я получаю с измененным кодом:

TypeError: Object(...)(...).then is not a function 
LoginPage._this.submit
src/ components/pages/LoginPage.js:10

7 | class LoginPage extends React.Component {
8 |     submit = data => {
9 |         const { login, history } = this.props;
10 |        login(data).then(() => history.push('/'));
11 |    };
12 | 
13 |    render() {

В нем говорится, что проблема в строке 10.

Любая помощь будет оценена!

Answer 1

Ваше исправление выглядит нормально, вы пробовали поместить submit = (data) => { ... } в фигурные скобки? Если вы не используете что-то вроде coffeescript, несколько операторов (одно деструктурирующее назначение, а затем вызов) должны быть в блоке. Может быть, поэтому eslint жалуется, но работает иначе - это всего лишь одно выражение, поэтому блок не требуется.

Answer 2

Как указано в другом, вам нужны фигурные скобки {}. Как следующее:

submit = data => {

    const { login, history } = this.props;
    login(data).then(() => history.push('/'));

}

es6 Функция стрелки работает по следующим правилам:

• Если после функции есть выражение в той же строке, оно вернет его.
• С одним аргументом скобки могут быть опущены
• Когда вы пишете несколько строк, вам нужно поставить {} и явно вернуть его, используя оператор return.

Answer 3

Если у вас есть несколько выражений внутри функции, вам нужно написать их в {}. В вашем случае вы бы написали

submit = data => {

    const { login, history } = this.props;
    login(data).then(() => history.push('/'));

}