New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why does Babel define the method in the constructor? #8015

Closed
IceEnd opened this Issue May 23, 2018 · 3 comments

Comments

Projects
None yet
5 participants
@IceEnd

IceEnd commented May 23, 2018

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

This comment has been minimized.

Collaborator

babel-bot commented May 23, 2018

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.

@IceEnd IceEnd changed the title from Babel define the method in the constructor to Why does Babel define the method in the constructor? May 23, 2018

@hzoo hzoo added the i: question label May 23, 2018

@jsg2021

This comment has been minimized.

jsg2021 commented May 23, 2018

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

This comment has been minimized.

Member

nicolo-ribaudo commented May 23, 2018

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

@lock lock bot added the outdated label Aug 22, 2018

@lock lock bot locked as resolved and limited conversation to collaborators Aug 22, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.