React使用useState向子传set方法无法更新父组件状态问题求解

• 最常见的原因是事件冒泡冲突：你点击关闭按钮的onClick事件触发后，事件沿着DOM树向上冒泡，触发了父层级中某个绑定了setEditModalOpen(true)的点击事件回调。由于React的状态更新是批量处理的，两次状态更新（先设false再设true）合并后最终状态还是true，所以看起来更新不生效。
• setTimeout(() => {}, 0)能生效的原因：该回调属于宏任务，会等待当前所有同步任务（包括冒泡触发的所有事件回调、React批量状态更新）全部执行完成后再执行，此时设置false不会被其他同步逻辑覆盖，因此能正常关闭模态框，但这只是临时规避方案，没有解决根因。
• 其他可能的成因：父组件存在逻辑错误的useEffect，在isEditModalOpen变更为false时又被其他依赖触发的回调改回true；模态框DOM层级和触发打开的元素重叠，点击事件穿透触发了打开逻辑。

1. 首先阻止关闭事件的冒泡，修改子组件的关闭逻辑：

<span onClick={(e) =>{ 
  e.stopPropagation() // 阻止事件向上冒泡
  setEditModalOpen(false) 
}} className="xModal">X</span>

2. 检查父层级DOM的点击事件绑定，确认是否有逻辑错误的回调（比如误将点击蒙层关闭写成了打开模态框）。
3. 推荐使用React Portal将模态框渲染到body节点下，脱离父组件的DOM结构，从根源避免事件冒泡到父元素的问题。
4. 可以加日志辅助定位：在setEditModalOpen(false)前后打印状态，同时在父组件渲染时打印isEditModalOpen，如果出现先输出false马上又输出true的情况，就可以确认是其他逻辑修改了状态，进一步排查对应代码即可。

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