CODEWITHSUNDEEP
javascriptreactjssetstate
Ravi Patel
Ravi Patel

Reputation: 1

this.setState is not working in componentDidUpdate

There is a some problem with this code, i think because `` setState is not working in this code.

this.setState({ 
  showTooltip: true, 
  toolTipsValue: message, 
  error: true 
})

Before click on a button 

this.props.loginRes = {
  responseCode: 1, 
  result: {}
}

After Click on button

prevProps.loginRes = {
  responseCode: 1, 
  result: {}
}

this.props.loginRes = {
  responseCode: 1,
  result: { 
    data: {}, 
    statusCode: 1, 
    statusMessage: 'Invalid email/mobile' 
  }
}

componentDidUpdate(prevProps, prevState) {
  if (this.props.loginRes !== prevProps.loginRes) {
    const message = this.props.loginRes.result.statusMessage;
    this.setState({
      showTooltip: true,
      toolTipsValue: message,
      error: true
    })
  }
}

Error Message Error Message Link

Upvotes: 0

Views: 575

Answers (2)

winwiz1
winwiz1

Reputation: 3164

The error this.setState is not a function is triggered because you didn't bind the onClick handler. As a result this points to the window object and not to the instance of your React class component. And the window object doesn't have setState() function as its property - that's what the error message says.

To fix this error either bind the onClick handler in the class constructor or rewrite the handler using an arrow function.

Using setState inside componentDidUpdate in the way you did should not cause endless loop.

Upvotes: 1

Paul
Paul

Reputation: 1441

As an addition to winwiz1. (What he says is correct).

You are commparing two objects in the componentDidUpdate function. Comparing two objects with !== will not work. The answer why it isn`t working can be found here: Comparing two objects

The solution is lodash with isEqual, example can be found here: Depp comparison between 2 objects

Upvotes: 1

Related Questions