this.setState 在 componentDidUpdate 中不起作用

Question

这段代码有一些问题，我认为是因为 `` setState 在这段代码中不起作用。

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

单击按钮之前

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

点击按钮后

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
    })
  }
}

错误信息错误信息链接

Answer 1

错误this.setState is not a function被触发，因为您没有绑定onClick处理程序。 结果this指向window对象而不是 React 类组件的实例。 并且window对象没有setState()函数作为其属性 - 这就是错误消息所说的。

要修复此错误，请在类构造函数中绑定onClick处理程序或使用箭头函数重写处理程序。

以您所做的方式在componentDidUpdate内使用setState不应导致无限循环。

Answer 2

作为winwiz1的补充。 （他说的是对的）。

您正在比较 componentDidUpdate 函数中的两个对象。 用 !== 比较两个对象是行不通的。 可以在这里找到为什么它不起作用的答案： 比较两个对象

解决方案是使用 isEqual 的 lodash，示例可以在这里找到： Depp compare between 2 objects