Question

我不确定为什么会收到Unexpected Token错误。我似乎无法看到错误。除非

第41行是}.bind(this),

之后的this.setState

ERROR in ./app/views/components/navbar.js
Module build failed: SyntaxError: /Users/bli1/Development/projects/cherngloong/cherngloong/app/views/components/navbar.js: Unexpected token (41:4)
                console.log(response);
                this.setState({logoPath: response});
            }.bind(this),
            error: (xhr, status, err) => {
                console.error(this.props.url, status, err.toString());
            }.bind(this),
    at Parser.pp.raise (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1378:13)
    at Parser.pp.unexpected (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2817:8)
    at Parser.pp.expect (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2811:33)
    at Parser.pp.parseObj (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:937:12)
    at Parser.pp.parseExprAtom (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:718:19)
    at Parser.parseExprAtom (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:4305:22)
    at Parser.pp.parseExprSubscripts (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:504:19)
    at Parser.pp.parseMaybeUnary (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:484:19)
    at Parser.pp.parseExprOps (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:415:19)
    at Parser.pp.parseMaybeConditional (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:397:19)
    at Parser.pp.parseMaybeAssign (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:360:19)
    at Parser.pp.parseExprListItem (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1206:16)
    at Parser.parseExprListItem (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3692:24)
    at Parser.pp.parseCallExpressionArguments (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:580:20)
    at Parser.pp.parseSubscripts (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:543:29)
    at Parser.pp.parseExprSubscripts (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:514:15)
    at Parser.pp.parseMaybeUnary (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:484:19)
    at Parser.pp.parseExprOps (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:415:19)
    at Parser.pp.parseMaybeConditional (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:397:19)
    at Parser.pp.parseMaybeAssign (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:360:19)
    at Parser.pp.parseExpression (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:324:19)
    at Parser.pp.parseStatement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1874:19)
    at Parser.parseStatement (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3507:22)
    at Parser.pp.parseBlockBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2208:21)
    at Parser.pp.parseBlock (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2189:8)
    at Parser.pp.parseFunctionBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1125:22)
    at Parser.parseFunctionBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3494:20)
    at Parser.pp.parseMethod (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:1094:8)
    at Parser.parseClassMethod (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:3735:12)
    at Parser.pp.parseClassBody (/Users/bli1/Development/projects/cherngloong/cherngloong/node_modules/babylon/index.js:2456:10)
 @ ./app/views/components/layout.js 17:14-36

Reactjs Component

class Logo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            method: 'GET',
            success: (response) => {
                console.log(response);
                this.setState({logoPath: response});
            }.bind(this),
            error: (xhr, status, err) => {
                console.error(this.props.url, status, err.toString());
            }.bind(this),
            data: {
                location: this.props.location
            }
        });
    }

    render() {
        return (
            <div className="logo">
                <a href="/">
                    <img src={ this.state.logoPath } alt="Home"/>
                </a>
            </div>
        )
    }
}

Answer 1

我对此错误感到惊讶，但我注意到 ArrowFunction 是 AssignmentExpression ，而 FunctionExpression 是 PrimaryExpression （spec），因此箭头函数表达式不是function函数表达式的直接下拉列表。仍感到惊讶。

有两种选择：

您不需要这些.bind(this)来电。箭头函数在它们被创建的上下文中靠近this（就像关闭变量一样）。因此，只需删除bind次调用即可解决错误。

示例：

＆＃13;

var foo = {
  name: "foo",
  doSomething() {
    setTimeout(() => {
      log("this.name = " + this.name);
    }, 0);
  }
};
foo.doSomething();

function log(msg) {
  var p = document.createElement('p');
  p.appendChild(document.createTextNode(msg));
  document.body.appendChild(p);
}

＆＃13;

或者，如果您需要bind（也许是为了讨论参数; this部分将被忽略），请将箭头放在箭头函数周围：

$.ajax({
    success: ((response) => {
// ----------^
    }).bind(null, arg0, arg1/*...*/)
// --^      ^^^^-- will be ignored, arrow functions inherit `this`
});

示例：

＆＃13;

var foo = {
  name: "foo",
  doSomething() {
    setTimeout(((arg) => {
  // ----------^
      log("this.name = " + this.name + ", arg = " + arg);
    }).bind(null, "bar"), 0);
  // ^      ^^^^-- ignored, could be anything
  }
};
foo.doSomething();

function log(msg) {
  var p = document.createElement('p');
  p.appendChild(document.createTextNode(msg));
  document.body.appendChild(p);
}

＆＃13;

意外的令牌但不确定为什么

1 个答案: