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

错误消息 Error Message Link

Answer 1

由于未绑定onClick处理程序，因此触发了错误 this.setState不是函数。结果，this指向window对象，而不是React类组件的实例。并且window对象没有setState()函数作为其属性-这就是错误消息所说明的内容。

要解决此错误，请使用类构造函数中的bind处理程序onClick或使用箭头功能的rewrite处理程序。

在setState内使用componentDidUpdate不会造成无限循环。

Answer 2

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

您正在比较componentDidUpdate函数中的两个对象。用！==比较两个对象将不起作用。为何无法正常工作的答案可以在这里找到：Comparing two objects

解决方案是使用isEqual的lodash，示例可在此处找到： Depp comparison between 2 objects

this.setState在componentDidUpdate中不起作用

2 个答案: