Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

setState not working because this._nextState is undefined

See original GitHub issue

In the constructor of my app I call an async function that does

this.setState({ loading: true })

This is the stack trace I get

util.js:9 Uncaught (in promise) TypeError: Cannot set property 'loading' of undefined
    at s (util.js:9)
    at App.d.setState (component.js:40)
    at App.somethingAsync (app.js:47)
    at new App (app.js:44)
    at T (index.js:67)
    at children.js:102
    at b (children.js:236)
    at b (children.js:231)
    at _ (children.js:60)
    at T (index.js:180))

In the the setState of component.js#L29 the this._nextState is undefined and s is also undefined.

I am using Preact with htm without any compilation, direct import in the browser with the script tag type module.

import { Component, h } from 'https://unpkg.com/preact@10.2.1/dist/preact.module.js'
import htm from 'https://unpkg.com/htm?module'
const html = htm.bind(h)

export default class App extends Component {
  constructor (props) {
    super(props)
    this.somethingAsync = this.somethingAsync.bind(this)
    this.state = {
      loading: false
    }
    this.somethingAsync()
  }
  async somethingAsync () {
    this.setState({ loading: true })
    setTimeout(() => this.setState({ loading: false }), 100)
  }
}

This is the index.js

import { h, render } from 'https://unpkg.com/preact@10.2.1/dist/preact.module.js'
import htm from 'https://unpkg.com/htm?module'
import App from './components/app.js'
const html = htm.bind(h)
render(
  html`<${App}  />`,
  document.getElementById('app')
)

What should I do?

Issue Analytics

State:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

JoviDeCroockcommented, Jan 30, 2020

Hey,

Usually we dispatch async stuff from componentDidMount since this is a bit safer, this because in constructor we are still creating everything while an async setState could happen during the construction of this part of the tree. In ComponentDidMount we’ve already established the semantics of this and are committing it to the DOM

However it shouldn’t error out and I’ll certainly look at it.

1reaction

rduque1commented, Jan 30, 2020

Ok thanks for the answer I will use the componentDidMount to make it work meanwhile. I have here a fully working example to test it easily. index.html

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<body>
  <div id='app' />

  <script type='module' >
    import { Component, h, render } from 'https://unpkg.com/preact@10.2.1/dist/preact.module.js'
    import htm from 'https://unpkg.com/htm?module'
    const html = htm.bind(h)
    class App extends Component {
      constructor (props) {
        super(props)
        this.somethingAsync = this.somethingAsync.bind(this)
        this.state = {
          loading: false
        }
        this.somethingAsync()
      }
      async somethingAsync () {
        this.setState({ loading: true })
        setTimeout(() => this.setState({ loading: false }), 100)
      }
    }

    render(
      html`<${App} />`,
      document.getElementById('app')
    )
  </script>

</body>
</html>