React报错：Rendered more hooks than during the previous render 求助

为了能在应用任意位置控制模态框的显示与隐藏，我实现了一个React Context，代码如下：

import React, { useState, createContext, useContext } from 'react';
import { ModalContextType } from './Types';

const ModalsContext = createContext<ModalContextType>(null);

function ModalsContextProvider({ children }: { children: any }) {
    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
    const [Modal, setModal] = useState<React.FC>();

    const handleModal = (Modal2Show: React.FC) => {
        setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);

        setModal(Modal2Show);
    }

    const contextValue = {
        handleModal
    }

    return (
        <ModalsContext.Provider value={contextValue}>
            {isModalOpen && Modal}
            {children}
        </ModalsContext.Provider>
    );
}

export const useModalsContext = () => useContext(ModalsContext);

export default ModalsContextProvider;

调用handleModal并传入要显示的模态组件时，遇到报错：Rendered more hooks than during the previous render。我清楚不能条件调用hooks，但我并没有这么做，却仍出现该错误，希望得到帮助。

核心原因 #

你直接把组件函数Modal作为状态存储，并且通过{isModalOpen && Modal}直接渲染这个函数——这相当于在渲染时动态创建了组件实例，而如果这个Modal组件内部使用了Hooks，就会导致每次渲染时Hooks的执行数量发生变化：

• 初始渲染时，isModalOpen为false，不渲染Modal，没有执行其内部Hooks
• 调用handleModal后，isModalOpen变为true，开始渲染Modal，执行其内部Hooks，此时Hooks总数比之前多，触发报错

另外，你的状态更新逻辑存在冗余：setIsModalOpen用函数式更新取反的同时设置Modal组件，会导致两次状态更新合并，但更关键的是直接存储组件函数不是React推荐的做法。

修复方案一：固定模态框类型枚举 #

这种方式适合模态框类型固定的场景，通过标识来控制渲染，确保组件Hooks执行稳定：

import React, { useState, createContext, useContext } from 'react';
import { ModalContextType } from './Types';

// 定义模态框类型枚举，明确支持的模态框
type ModalType = 'UserModal' | 'SettingsModal';

// 假设你已经定义了对应的模态组件
import UserModal from './UserModal';
import SettingsModal from './SettingsModal';

const ModalsContext = createContext<ModalContextType>(null);

function ModalsContextProvider({ children }: { children: React.ReactNode }) {
    // 存储当前显示的模态框类型，null表示关闭
    const [currentModal, setCurrentModal] = useState<ModalType | null>(null);

    const handleModal = (modalType: ModalType | null) => {
        // 点击同类型则关闭，否则切换到目标模态框
        setCurrentModal(prev => prev === modalType ? null : modalType);
    }

    const contextValue = {
        handleModal
    }

    return (
        <ModalsContext.Provider value={contextValue}>
            {/* 固定条件渲染，确保组件Hooks每次都能稳定执行 */}
            {currentModal === 'UserModal' && <UserModal />}
            {currentModal === 'SettingsModal' && <SettingsModal />}
            {children}
        </ModalsContext.Provider>
    );
}

export const useModalsContext = () => useContext(ModalsContext);

export default ModalsContextProvider;

修复方案二：支持动态传入任意组件 #

如果需要动态传入未知的模态组件，不要直接存储组件函数，而是存储组件配置，用React.createElement来正确实例化组件：

import React, { useState, createContext, useContext, ReactElement } from 'react';
import { ModalContextType } from './Types';

// 定义模态框配置类型
type ModalConfig = {
  component: React.FC<any>;
  props?: Record<string, any>;
} | null;

const ModalsContext = createContext<ModalContextType>(null);

function ModalsContextProvider({ children }: { children: React.ReactNode }) {
    const [modalConfig, setModalConfig] = useState<ModalConfig>(null);

    const handleModal = (config: ModalConfig) => {
        // 传入相同组件则关闭，否则显示目标组件
        setModalConfig(prev => prev?.component === config?.component ? null : config);
    }

    const contextValue = {
        handleModal
    }

    return (
        <ModalsContext.Provider value={contextValue}>
            {/* 用React.createElement确保组件被正确实例化，避免Hooks执行异常 */}
            {modalConfig && React.createElement(modalConfig.component, modalConfig.props)}
            {children}
        </ModalsContext.Provider>
    );
}

export const useModalsContext = () => useContext(ModalsContext);

export default ModalsContextProvider;

调用示例：

import UserModal from './UserModal';

const SomePage = () => {
  const { handleModal } = useModalsContext();
  
  return (
    <button 
      onClick={() => handleModal({ 
        component: UserModal, 
        props: { userId: 123, onClose: () => handleModal(null) } 
      })}
    >
      打开用户详情弹窗
    </button>
  );
}

关键总结 #

• 禁止直接渲染存储在状态中的组件函数，这会破坏React Hooks的执行顺序规则
• 要么用固定的条件分支渲染已知组件，要么用React.createElement动态创建组件实例
• 确保所有组件的Hooks在每次渲染时都以相同的顺序和数量执行，这是避免此类报错的核心

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