this.setState 在 componentDidUpdate 中不起作用

Question

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

Answer 1

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.

Answer 2

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