Redux托管的Modal中渲染使用Hooks的函数组件触发无效Hook调用错误

问题原因 #

你遇到的报错核心原因有两点：

1. Redux 官方要求 store 中只能存储可序列化的数据（字符串、数字、普通对象、数组等），你将函数类型的组件直接存入 store 违反了这一设计规范。Redux 默认开启的序列化检查会破坏函数的 React 上下文，导致带 Hook 的组件渲染时无法找到正确的调用栈，触发无效 Hook 调用错误。
2. 非序列化值存入 store 还会导致 Redux DevTools 功能异常、时间旅行调试失效等衍生问题，属于不推荐的写法。

方案1：枚举映射（最推荐，完全符合Redux规范） #

不要直接传组件到 store，而是用唯一标识映射组件，store 仅存储标识和组件需要的参数：

1. 先定义弹窗类型枚举和组件映射表：

// 单独的modal配置文件
import FunctionalComponentThatUsesHooks from './path/to/your/component'
export const MODAL_TYPES = {
  FUNCTIONAL_BTN: 'FUNCTIONAL_BTN'
}
export const MODAL_COMPONENT_MAP = {
  [MODAL_TYPES.FUNCTIONAL_BTN]: FunctionalComponentThatUsesHooks
}

2. 分发action时只传类型和props：

const handleModalButtonClick = () => {
  this.props.actions.displayModal({
    className: 'modal-light',
    modalType: MODAL_TYPES.FUNCTIONAL_BTN,
    modalProps: {
      size: 'large',
      children: '弹窗按钮'
    }
  });
};

3. Reducer逻辑不需要修改，直接存储payload即可。
4. 修改Modal组件的渲染逻辑：

import { MODAL_COMPONENT_MAP } from './modalConfig'
get modalBody() {
  const { modalType, modalProps } = this.props;
  if (!modalType || !MODAL_COMPONENT_MAP[modalType]) {
    return null;
  }
  const InnerComponent = MODAL_COMPONENT_MAP[modalType];
  return (
    <div className="modal-body" ref={this.modalBodyNode}>
      <InnerComponent {...modalProps} />
    </div>
  );
}

方案2：全局组件注册表（适用于动态生成组件的场景） #

如果你的弹窗组件是完全动态生成的、无法提前枚举，可以用全局Map存储组件，store仅存储组件ID：

// 全局注册表模块
export const modalComponentRegistry = new Map()
// 生成唯一ID的工具函数
const generateId = () => Math.random().toString(36).slice(2)

// 分发action时
const handleModalButtonClick = () => {
  const componentId = generateId()
  modalComponentRegistry.set(componentId, FunctionalComponentThatUsesHooks)
  this.props.actions.displayModal({
    className: 'modal-light',
    componentId,
    modalProps: { size: 'large' }
  });
};

// Modal渲染时
get modalBody() {
  const { componentId, modalProps } = this.props;
  if (!componentId || !modalComponentRegistry.has(componentId)) {
    return null;
  }
  const InnerComponent = modalComponentRegistry.get(componentId);
  return (
    <div className="modal-body" ref={this.modalBodyNode}>
      <InnerComponent {...modalProps} />
    </div>
  );
}

// 弹窗关闭时记得删除注册表中的组件，避免内存泄漏
componentWillUnmount() {
  const { componentId } = this.props;
  if (componentId) {
    modalComponentRegistry.delete(componentId)
  }
}

临时兼容方案（不推荐） #

如果你不想调整现有架构，可以临时关闭Redux对modal字段的序列化检查，以Redux Toolkit为例：

import { configureStore } from '@reduxjs/toolkit'
export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredPaths: ['modal.component'],
      },
    }),
})

该方案仅能解决当前报错，依然存在DevTools异常、调试困难等问题，不建议长期使用。

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