es6 arrow function in class property

Question

I bundle the codes with ./node_modules/.bin/webpack -d. I didn't compile ES6 to ES5 except this class fields proposal.

It give this error:

Uncaught TypeError: this.fetchTestExecutions is not a function

Here's the codes:

import React from 'react'
import Config from 'Config'

class HomePage extends React.Component {

  state = {
    executions: this.fetchTestExecutions()
  }

  fetchTestExecutions = () => {
    const host = Config.host
    return fetch(`${host}/execution/index`)
      .then(response => response.json())
      .then(json => {
        this.setState({executions: json})
      })
  }

  render() {
    return(
      <div>
        { this.state.executions.map(x => <div>x.from</div>) }
      </div>
    )
  }
}

export default HomePage

Here's the webpack.config.js:

var webpack = require('webpack')

module.exports = {
  entry: './src/App.jsx',
  output: {
    filename: './../public/bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        query: {
          plugins: ['transform-class-properties'],
          presets: ['react'],
        }
      }
    ]
  },
  externals: {
    'Config': JSON.stringify({host: "http://127.0.0.1:3000"})
  }
}

What's wrong?

Thanks for your time!

Hemerson Carlin · Accepted Answer · 2018-01-19 06:41:52Z

3

Setting a method (specially an api call) as a state property is not a good pattern. Instead, prefer calling the api first in a lifecycle event and then set state later.

class HomePage extends React.Component {
  state = {
    executions: []
  }

  componentDidMount() {
    const host = Config.host

    fetch(`${host}/execution/index`)
      .then(response => response.json())
      .then(json => this.setState({ executions: json }))
  }

  render() {
    return(
      <div>
        { this.state.executions.map(x => <div>x.from</div>) }
      </div>
    )
  }
}

answered Jan 19, 2018 at 6:41

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sulthan Over a year ago

He's not setting the method, he's setting the promise returned from that method. However, it's definitely a very bad pattern.

Hemerson Carlin Over a year ago

Yes, sure. It was just a mean to explain the bad pattern :)

mCY Over a year ago

Hi @mersocarlin, thanks for the advise on setting state. what if I got another randomString = () => "a string", and state = { executions: this.randomString()}. It still give the same error. state is a class variable? this.randomString() is instance method?

Hemerson Carlin Over a year ago

@mCY state is an object link to docs. And I wouldn't use method (as randomString for example) to set its initial properties. this.randomString() is an instance method if you defined it inside your component (which allows you to call this.randomString()) from anywhere within the component.

Estus Flask · Accepted Answer · 2018-01-19 07:16:09Z

Class fields (which are currently stage 2 proposal) are assigned on class instantiation. The original code is equal to this ES6 code:

class HomePage extends React.Component {
  constructor() {
    this.state = {
      executions: this.fetchTestExecutions()
    };

    this.fetchTestExecutions = () => { /*...*/ };
  }
  ...
}

As it appears, the order matters, and fetchTestExecutions is undefined at the moment when it's being called.

In order to make it work, fetchTestExecutions class field should be defined before state.

Unless fetchTestExecutions is used as a callback (and it's not), it should definitely be prototype method (already suggested in another answer):

class HomePage extends React.Component {
  state = {
    executions: this.fetchTestExecutions()
  }

  fetchTestExecutions() { /*...*/ }
  ...
}

This eliminates the problem and results in more efficient code. See also this explanation on what are the practical differences between arrow (instance) and prototype methods.

Rajat Dhoot · Accepted Answer · 2018-01-19 06:48:18Z

1

You have to change your function like this

fetchTestExecutions(){
const host = Config.host
return fetch(`${host}/execution/index`)
  .then(response => response.json())
  .then(json => {
    this.setState({executions: json})
  })
}

answered Jan 19, 2018 at 6:48

Rajat Dhoot

1854 silver badges17 bronze badges

Collectives™ on Stack Overflow

es6 arrow function in class property

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related