Question

我升级到babel版本6，我使用"es2015", "react", "stage-0"作为预设。我正在使用es6语法使用react。

在升级之前一切正常。升级后，我开始在我调用父构造函数的地方获得异常。

例如，对于以下类：

class childForm extends ParentForm {
    constructor(props, context) {
        console.log("this get printed.");
        super(props, context);
        console.log("this is not printed");
    }
    ...
}

class ParentForm extends React.Component {
    constructor(props, context) {
        console.log("this is printed");
        super(props, context);
        console.log("this is printed too");
    }

    ...
}



class AnotherComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        myService.findById(this.props.params.id).then(result => {
             this.setState({result: result});
        }).catch(err => {
            /**** Error is catched here ******/
            console.log(err);
        });
    }

    render(){
         return <div>{this.state.result && <ChildForm/>}</div>
    }
}

我在控制台上遇到以下错误：

TypeError: (0 , _typeof3.default) is not a function(…)
ReactCompositeComponent.js?cd59:443 Uncaught (in promise) TypeError: Cannot read property 'context' of null(…)

抛出错误的React函数是以下函数。 ReactCompositeComponentMixin.updateComponent

引发的例外情况

  updateComponent: function (transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) {
    var inst = this._instance;

    var nextContext = this._context === nextUnmaskedContext ? inst.context : this._processContext(nextUnmaskedContext);
    ....

如果我将父类的所有功能都包含在子类中，它将按预期工作。有没有人遇到类似的问题？

还可以使用某些库或插件进行更好的异常消息进行反应吗？

Answer 1

这可能是类编译的一个问题。如果在超类之前声明子类，它看起来可能会导致错误。

在babeljs.io上尝试此操作目前会导致错误：

class A extends B {
    constructor(x) {
        super(x);
    }
}

class B {
    constructor(x) {
        console.log(x);
    }
}

new A('a');

尝试更改类定义的顺序：

class ParentForm extends React.Component {
    constructor(props, context) {
        super(props, context);
    }
    ...
}

class childForm extends ParentForm {
    constructor(props, context) {
        super(props, context);
    }
    ...
}

编辑： Chrome的类似乎表现得非常相似，Uncaught ReferenceError: B is not defined(…)会在声明时抛出。

Babel 6对父进行超级构造函数调用抛出异常

1 个答案: