React17+NextJS12状态更新后Modal消失但isOpen仍为true如何解决

问题排查方向与解决方案 #

1. 先修复函数引用不稳定的问题

你现有代码中多处存在函数引用每次渲染重新生成的问题，会导致不必要的重渲染甚至逻辑异常：

• Modal组件内的open、close方法添加useCallback包裹，同时确认useRegisterModal返回的register方法也用useCallback包裹避免引用不稳定

// Modal组件内修改
const open = useCallback(() => setIsOpen(true), []);
const close = useCallback(() => setIsOpen(false), []);

useEffect(() => {
  register({ open, close });
// 确保依赖完整
}, [register, open, close]);

• SlideshowController内的切换方法添加useCallback包裹，避免Context value每次更新导致所有子组件重渲染

const onPreviousRequest = useCallback<MouseEventHandler<HTMLButtonElement>>((event) => {
  event.preventDefault();
  setCurrentlyViewedPhoto(previousPhoto);
}, [previousPhoto]);

const onNextRequest = useCallback<MouseEventHandler<HTMLButtonElement>>((event) => {
  event.preventDefault();
  setCurrentlyViewedPhoto(nextPhoto);
}, [nextPhoto]);

2. 排查Styled Components SSR Hydration 不匹配问题

你使用的技术栈组合（NextJS 12 + Styled Components 5）很容易出现SSR客户端与服务端渲染结果不匹配的问题，React会在hydration阶段删除不匹配的DOM节点，哪怕组件状态正常。
确认你在next.config.js中开启了styled components支持：

module.exports = {
  compiler: {
    styledComponents: true,
  },
}

如果使用Babel配置，需要在.babelrc中添加对应的插件配置：

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

3. 排查子组件运行时错误

在Modal的子组件外层添加ErrorBoundary捕获运行时错误，React 17会自动卸载抛出未捕获错误的组件树，看起来就像Modal内容被移除：

class ModalErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error) { console.error("Modal子组件报错:", error); }
  render() {
    if (this.state.hasError) return <div>Modal加载出错</div>;
    return this.props.children;
  }
}

// SlideShowModal内使用
const SlideShowModal: FC = () => {
  return (
    <Modal uniqueKey="slideshow">
      <ModalErrorBoundary>
        <SlideshowImage />
        <SlideshowControlBar />
      </ModalErrorBoundary>
    </Modal>
  );
};

4. 清理冗余逻辑

Modal组件内的isModalOpen的useMemo属于冗余代码，直接使用isOpen即可，不会影响性能也不会导致问题，但可以删除简化代码。

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