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 => {

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

}

Answer 2

您的修复程序看上去不错，您是否尝试过将std::atomic_flag放在花括号中？除非您使用coffeescript之类的东西，否则多个语句（一个解构赋值然后是调用）需要放在一个块中。这也许就是eslint抱怨的原因，但它却可以正常工作-它只是一个表达式，因此没有必要使用阻止。

Answer 3

另一点是，您需要大括号{}。如下所示：

submit = data => {

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

}

es6箭头功能符合以下规则：

如果after函数在同一行上有一个表达式，它将返回它。
仅需一个参数即可省略括号
编写多行代码时，您需要戴上{}并使用return语句显式返回它。

破坏道具分配

3 个答案: