React中setIsOpen更新state未触发对应依赖useEffect问题排查

这个问题是事件冒泡导致同周期状态更新冲突，React批处理后判定状态未变化跳过渲染导致的，和观察到的现象完全吻合：

• 点击Calendar内的日期选项时，点击事件会顺着DOM树向上冒泡，最终会冒泡到绑定targetRef的下拉触发元素（比如日期输入框、下拉开关按钮）上。
• 通常这类触发元素都会绑定点击事件控制下拉显隐，常见逻辑是点击就设isOpen为true，或是做状态切换。
• 事件执行顺序为：先触发Calendar的onSelect回调执行onCalendarSelect逻辑，把setIsOpen(false)加入更新队列；之后事件冒泡到触发元素，执行触发元素的点击逻辑，又把setIsOpen(true)加入更新队列。
• React会对同一事件周期内的状态更新做批处理，最终计算得到isOpen的值还是true，和更新前的值完全一致，就会直接跳过整个重渲染流程：所以依赖isOpen的useEffect根本不会触发，onCalendarSelect里打印的永远是当前渲染闭包里保存的isOpen=true值，下拉层也不会关闭。
• 而点击Drop外部空白区域时，点击目标既不在Drop内部，也不会命中绑定了打开逻辑的触发元素，不会触发额外的setIsOpen(true)调用，所以setIsOpen(false)可以正常生效，下拉层正常关闭。

按优先级操作即可：

1. 拦截Calendar区域的点击事件冒泡：这是最直接的修复方式，如果Calendar的onSelect回调直接返回日期值、不返回事件对象，可以给Calendar外层套一个容器，在容器上阻止点击事件冒泡：

   <Drop
     overflow="unset"
     align={{ right: "left", top: "bottom", bottom: "bottom" }}
     style={{ overflowY: "scroll" }}
     target={targetRef.current}
     onClickOutside={() => setIsOpen(false)}
     onEsc={() => setIsOpen(false)}
   >
     {/* 新增容器阻止事件冒泡 */}
     <div onClick={(e) => e.stopPropagation()}>
       <Calendar
         date={
           value
             ? moment(value)
                 .format()
                 .split("T")[0]
             : null
         }
         onSelect={(evt) => {
           onCalendarSelect(evt.toString());
         }}
         size="small"
         {...(calendarPassedProps as CalendarProps)}
       />
     </div>
   </Drop>
   

2. 优化触发元素的点击逻辑：确保下拉打开状态下，点击触发元素不会重复设置isOpen为true，推荐用函数式更新做状态切换，避免闭包导致的状态错误：

   // 触发元素点击逻辑推荐写法
   const toggleOpen = () => setIsOpen(prev => !prev);
   

3. 排查父组件传入的onChange逻辑：确认父组件在接收到日期变化的回调时，没有主动把下拉的打开状态设回true；如果是受控模式的下拉显隐，要保证状态同步逻辑一致。

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