点击添加含Hooks的复杂组件出现Rendered more hooks错误，如何实现？

问题场景 #

我尝试通过按钮点击向DOM中添加一个复杂组件，代码如下：

const BlockChain = () => {
  const [blocks, setBlocks] = useState([Block, Block] as typeof Block[]);

  return (
    <Layout activeRoute="blockChain">
      {blocks.map((b, i) => b({ blockNr: i, leadingZeros: 3, speed: 7 }))}
      <button
        onClick={() => {
          const _blocks = blocks.slice(0);
          _blocks.push(Block);
          setBlocks(_blocks);
        }}
      >
        add Block
      </button>
    </Layout>
  );
};

执行后遇到错误：Rendered more hooks than during the previous render.

我的Block组件内部使用了setInterval，还有多个useRef和useState钩子，想问是否可以通过这种方式添加组件？

问题原因 #

你当前的写法直接将组件函数存入状态数组，然后在渲染时直接调用执行（b({...props})），这种动态调用组件函数的方式会破坏React的Hook规则：React要求组件内部的Hook调用顺序必须在每次渲染时保持完全一致，而动态添加组件函数后，每次渲染的Hook调用数量会变化，因此触发了上述报错。

正确实现方式 #

不要将组件函数存在状态中，而是用状态管理组件的实例标识或配置数据，渲染时根据这些数据生成对应的组件实例：

const BlockChain = () => {
  // 用数组存储每个Block的唯一标识，确保每个组件实例有唯一key
  const [blockInstances, setBlockInstances] = useState<number[]>([0, 1]);

  return (
    <Layout activeRoute="blockChain">
      {blockInstances.map((id) => (
        <Block
          key={id}
          blockNr={id}
          leadingZeros={3}
          speed={7}
        />
      ))}
      <button
        onClick={() => {
          // 追加新的唯一标识，这里用当前数组长度作为新id
          setBlockInstances(prev => [...prev, prev.length]);
        }}
      >
        add Block
      </button>
    </Layout>
  );
};

为什么原写法不可行？ #

React的Hook规则有两个核心要求：

• 只能在函数组件或自定义Hook的顶层作用域调用Hook
• 不能在循环、条件判断或嵌套函数中调用Hook

你之前直接执行组件函数的方式，相当于在map循环里动态调用了包含Hook的函数，每次添加新组件后，循环执行次数增加，Hook调用总数也随之变化，违反了Hook调用顺序必须稳定的规则，导致报错。

而通过状态管理组件实例标识的方式，是让React负责每个<Block />组件的渲染和Hook生命周期管理，每个Block都是独立的组件实例，各自维护自身的Hook状态，完全符合React的规则。

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