分解道具分配

我在react中遇到了一些与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() {

任何帮助都将不胜感激!