React组件调用setState后未更新，条件渲染失效求助

你遇到的问题核心在于自定义的 shouldComponentUpdate 方法没有考虑到 isDropdownExpanded 这个状态的变化。当你调用 renderTree 修改这个状态时，组件的更新逻辑被这个生命周期方法给“拦住”了。

具体分析 #

看一下你的 shouldComponentUpdate 代码：

shouldComponentUpdate(nextProps, nextState) {
  if (this.state.keyword !== nextState.keyword) {
    return true;
  }
  if (!_.isEqual(this.state.checked, nextState.checked)) {
    return true;
  }
  if (_.isEqual(this.state.expanded, nextState.expanded)) {
    return false;
  }
  return true;
}

这个方法只检查了 keyword、checked、expanded 三个状态的变化，完全忽略了 isDropdownExpanded。当你切换这个状态时：

1. 前后的 keyword、checked、expanded 都没有变化
2. 代码走到第三个条件，发现 expanded 相等，直接返回 false
3. 组件因此不会触发重新渲染，哪怕 isDropdownExpanded 已经改变

修复方案 #

只需要在 shouldComponentUpdate 中添加对 isDropdownExpanded 的检查即可，把它放在最前面（确保优先判断）：

shouldComponentUpdate(nextProps, nextState) {
  // 新增：检查下拉展开状态的变化
  if (this.state.isDropdownExpanded !== nextState.isDropdownExpanded) {
    return true;
  }
  
  if (this.state.keyword !== nextState.keyword) {
    return true;
  }
  if (!_.isEqual(this.state.checked, nextState.checked)) {
    return true;
  }
  if (_.isEqual(this.state.expanded, nextState.expanded)) {
    return false;
  }
  return true;
}

额外提醒 #

使用 shouldComponentUpdate 时，一定要确保覆盖所有会影响UI渲染的状态和属性。如果后续新增了其他状态，也要记得同步更新这个方法的判断逻辑，否则很容易再次出现类似的“状态更新但不渲染”问题。

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