Why does Babel define the method in the constructor?

[IceEnd]

I use babel to compile the react code, and find that Babel defines the component methods in the constructor.

.babelrc:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["chrome 61"],
      }
    }],
    "stage-0",
    "react"
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-runtime"
  ]
}

component:

import React, { Component } from 'react';
export default class Explorer extends Component {
  constructor() {
    super();
    this.state = {
      searchStatus: 0, 
    };
  }
  getNotes = () => {
    const { note } = this.props;
    // do something...
  }
  render() {
    this.getNotes();
    return (<h1>hello world!</h1>);
  }
}

After compiling via webpack:

//...
let Explorer = (_temp = _class = class Explorer extends _react.Component {
  constructor() {
    super();

    this.getNotes = () => {
      const { note } = this.props;
      // do something...
    };

    this.state = {
      searchStatus: 0
    };
  }

  render() {
    this.getNotes();
    return (<h1>hello world!</h1>);
  }
}
//...

Running in the browser gets an error：

Explorer.jsx?bdfb:34 Uncaught TypeError: Cannot destructure property `note` of 'undefined' or 'null'.

Because there is no super(props) in the constructor.

constructor(props) {
  super(props);

  this.getNotes = () => {
    const { note } = this.props;
    // do something...
  };

  this.state =  {
    searchStatus: 0
  };
}

But in my code constructor does not need to use props.

How to solve this problem?

[babel-bot]

Hey @IceEnd! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[jsg2021]

Your error is that you did not pass props to super() from your constructor's arguments. If you subclass React.Component and implement the constructor, you must pass the props (your first argument to constructor) to the super() call. This is how react defines their components class.

The getNotes is not a method, but a class instance field (stage 3) with an arrow function expression as a value. And instance fields are defined/initialized in the constructor when transpiled. Here is more information on the spec: https://github.com/tc39/proposal-class-fields

[nicolo-ribaudo]

Class properties should be defined in the constructor. @jsg2021 is right 👍