如何在componentDidUpdate的if语句中设置双条件及排查触发问题？

你的问题出在逻辑运算符的使用上——当前代码里的&&要求两个条件必须同时成立才会执行后续代码，也就是只有当address_id和whoIsMetting在同一次组件更新中同时发生变化时，console.log才会触发。如果这两个状态是分开、先后更新的，那每次只会满足其中一个条件，自然不会执行代码。

下面给你两种常见场景的解决方案：

场景1：只要其中一个状态变化就执行代码 #

如果你想要的是任意一个状态发生变化都触发逻辑，把&&换成||（逻辑或）即可：

componentDidUpdate(prevProps, prevState) {
  if (prevState.address_id !== this.state.address_id || prevState.whoIsMetting !== this.state.whoIsMetting) {
    console.log("hello");
  }
}

场景2：必须两个状态都完成变化才执行代码 #

如果你确实需要等待两个状态都更新后再执行逻辑，那要确认这两个状态的更新时机：

• 如果它们是通过同一次setState更新的，那原来的&&代码其实是有效的，检查一下是否在更新时同时修改了两个状态；
• 如果它们是分两次setState更新的，那第二次更新时，prevState会包含第一次更新后的状态值，此时两个条件会同时满足，代码也会触发。

另外，这里提醒你检查一下变量名的拼写：whoIsMetting是不是应该写成whoIsMeeting？如果前后拼写不一致，也会导致条件判断失效。

最后补充：componentDidMount只会在组件挂载完成后执行一次，无法监听后续的状态变化，所以不能用它来实现状态变化的双条件检查，必须使用componentDidUpdate（类组件）或者函数组件中的useEffect钩子。

内容的提问来源于stack exchange，提问作者Yerlan Yeszhanov