解构属性赋值

Question

我在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() {

它说问题在第10行。

任何帮助都将不胜感激！

Answer 1

当一个函数中有多个表达式时，需要在{}中编写它。在您的情况下，您应该这样写

submit = data => {

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

}

Answer 2

你的修复看起来很好，你试过把submit = (data) => { ... }放在花括号里吗？除非您正在使用coffeescript之类的语句，否则需要在一个块中使用多个语句(一个解构赋值，然后是调用)。这可能就是为什么eslint会抱怨，但它在其他方面是有效的-它只是一个表达式，所以不需要阻塞。

Answer 3

正如另一个人指出的那样，你需要花括号{}。如下所示：

submit = data => {

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

}

es6箭头函数使用以下规则：

• 如果函数后同一行有一个表达式，则返回该表达式。
• 使用一个参数时，可以省略括号
• 当您编写多行代码时，您需要放在{}上并使用return语句显式返回它。

<

• >F212{}>