如何用React.forwardRef处理可变数量组件且规避Hook数量变更报错？

问题背景 #

我们的React表单系统自2016年起维护，采用大State存储所有表单项值，通过包装函数让外层表单访问子元素的值与变更事件。原有表单组件均为无逻辑的「哑组件」，导致大量代码重复；尝试引入基于React.useImperativeHandle的「智能组件」复用逻辑后，动态添加字段时触发Rendered more hooks than during the previous render.错误。

极简复现代码：

const SuffixInput = React.forwardRef(function SuffixInput(props, ref) {
  React.useImperativeHandle(ref, () => ({
    onChange: (e) => {
      return e.currentTarget.value + 'bar'
    }
  }))

  return <input ref={ref} />
})

// 实际代码包含更多配置项
function formItemWrapper() {
  return (child) => {
    const thisRef = React.useRef(null)
    const props = {
      onChange: (e) => thisRef?.current.onChange(e)
    }
    return React.cloneElement(child, props)
  }
}

function App() {
  const [elements, setElements] = React.useState([1])

  return (
    <div className="App">
      {elements.map((i) => {
        return <React.Fragment key={i}>{formItemWrapper()(<SuffixInput />)}</React.Fragment>
      })}
      <button onClick={() => setElements((prev) => [...prev, prev.length+1])}>Add</button>
    </div>
  )
}

错误原因 #

React的Hook核心规则要求：每次渲染时Hook的调用顺序和数量必须完全一致。当前代码中，formItemWrapper()在map循环内被调用，新增字段时会执行其返回函数，而该函数内部调用了React.useRef——相当于在循环中动态新增Hook调用，直接违反规则。

解决方案 #

方案1：将包装函数转换为组件（改动最小） #

把formItemWrapper改为React组件，让Hook在组件内部稳定调用，新增元素仅新增组件实例，不会改变整体Hook调用的顺序与数量：

const SuffixInput = React.forwardRef(function SuffixInput(props, ref) {
  React.useImperativeHandle(ref, () => ({
    onChange: (e) => {
      return e.currentTarget.value + 'bar'
    }
  }))

  return <input ref={ref} />
})

// 改为组件形式
const FormItemWrapper = ({ children }) => {
  const thisRef = React.useRef(null)
  const props = {
    onChange: (e) => thisRef?.current.onChange(e)
  }
  return React.cloneElement(children, props)
}

function App() {
  const [elements, setElements] = React.useState([1])

  return (
    <div className="App">
      {elements.map((i) => {
        return <React.Fragment key={i}><FormItemWrapper><SuffixInput /></FormItemWrapper></React.Fragment>
      })}
      <button onClick={() => setElements((prev) => [...prev, prev.length+1])}>Add</button>
    </div>
  )
}

方案2：将Hook移到循环外部（兼容特殊场景） #

若无法修改包装函数结构，可在循环外创建统一的ref容器，通过映射关系管理所有动态元素的引用，避免在循环内调用Hook：

function App() {
  const [elements, setElements] = React.useState([1])
  // 循环外创建ref容器
  const refs = React.useRef({})

  const handleOnChange = (index, e) => {
    refs.current[index]?.onChange(e)
  }

  return (
    <div className="App">
      {elements.map((i, index) => {
        return (
          <React.Fragment key={i}>
            <SuffixInput 
              ref={(el) => refs.current[index] = el}
              onChange={(e) => handleOnChange(index, e)}
            />
          </React.Fragment>
        )
      })}
      <button onClick={() => setElements((prev) => [...prev, prev.length+1])}>Add</button>
    </div>
  )
}

关键说明 #

React不允许动态变更Hook的数量，这是不可突破的核心规则，没有办法「告知React允许此类变更」。方案1是最贴近原有逻辑且改动最小的实现方式，无需重写整个表单系统即可解决问题。

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