CODEWITHSUNDEEP
reactjsderbyjsracerjs
kapeskittu
kapeskittu

Reputation: 41

Cannot update during an existing state transition (such as within `render` or another component's constructor)

In the code below _updateQID method is triggered on emitting event 'Questions.updateHeader' by another component. when emitted event and triggered _updateQID i get below warning in console:

Warning: forceUpdate(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

import React, { Component } from 'react'
import { subscribe, model } from '~/lib'
import { ContextMenu } from 'project-components'
import _ from 'lodash'
import EventEmitter from 'eventemitter3'

import './Headers.styl'



class Headers extends React.Component {
    constructor (props) {
        super(props)
        this.ee = new EventEmitter()
        this._updateQID = this._updateQID.bind(this)
    }

  componentDidMount () {
    model.on('Questions.updateHeader', this._updateQID.bind(this))
  }

  componentWillUnmount () {
    model.removeListener('Questions.updateHeader', this._updateQID.bind(this))
  }


 _updateQID = () =>{
     this.forceUpdate()
  }


  render () {
    return (<div className="header">DUMMY TEST FOR HEADER</div>)
  }
}

export default Headers

Please help

Upvotes: 1

Views: 4431

Answers (1)

kapeskittu
kapeskittu

Reputation: 41

Okay we solved it... We were triggering the event to forceupdate Headers component from render method of another component.... After putting it into componentDidUpdate instead of render that warning was gone...

Upvotes: 2

Related Questions