React项目中useState调用未更新、模态框点击区域检测异常问题求助

问题1：useState不更新、页面无法切换的核心原因 #

你调用ReactDOMServer.renderToString(<Menu />)生成的是纯静态HTML字符串，这个方法本身是服务端渲染专用API，输出的内容没有绑定任何React事件监听，也没有接入React客户端运行时的状态管理逻辑。你把这段静态HTML直接覆盖到placeholder节点里，原来React渲染的带响应式能力的Menu组件直接被替换成了无交互的静态DOM节点，点击箭头当然触发不了switchPage逻辑，状态自然不会更新。
另外你违反了React开发的核心原则：不要绕过React直接手动操作DOM修改节点内容，React本身是状态驱动视图的，所有视图变化都应该通过状态修改来触发。

问题2：点击位置检测错误的原因 #

1. 节点引用失效：你初始化时获取的childrenNodes里的所有节点，在你执行placeholder.innerHTML = xxx覆盖DOM之后，全部都不是当前页面实际存在的节点了，和你点击的target自然匹配不上。
2. 初始化节点为空：如果页面初始加载时模态框处于隐藏状态，document.getElementsByClassName根本拿不到对应的DOM节点，childrenNodes里全是undefined，所有判断都会命中「点击外部」。
3. 匹配逻辑问题：你用e.target === node做精确匹配，如果你点击的是节点内部的文本节点、图标节点等子元素，也会匹配失败。换成node.contains(e.target)或者直接用e.target.closest('.menu')判断更合理。

其他隐性问题 #

• 你的Menu组件内部单独包了BrowserRouter，正常React应用全局只能有一个Router根节点，这里嵌套Router会导致路由逻辑异常，你可以把Router移到App组件的根位置。
• 你App.js里的placeholder默认已经渲染了Menu和Contact组件，后面手动覆盖innerHTML的逻辑完全和React的渲染逻辑冲突，会导致内存泄漏、状态异常等各种问题。

修复建议 #

你完全不需要手动操作DOM控制模态框，直接用React状态控制显隐即可：

1. 在App组件中加一个状态const [showMenu, setShowMenu] = useState(false)
2. placeholder节点内改写成{showMenu && <Menu />} {showContact && <Contact />}
3. showModal和hideModal函数直接修改showMenu的布尔值即可，不要碰innerHTML相关的操作。
4. 点击外部关闭的逻辑可以直接用React事件实现：给模态框根节点加onClick={e => e.stopPropagation()}，给placeholder节点加onClick={hideModal}即可，不需要自己全局监听遍历节点。

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