React表单动态子组件数据收集问题（无法循环调用useRef）

因为React Hooks的规则限制不能在循环、条件语句里调用useRef，但可以通过单个useRef维护ref集合或者改用受控组件这两种方式解决可变数量子组件的表单数据收集问题，具体方案如下：

方案一：用单个useRef存储所有子元素的ref #

不需要循环创建多个useRef，而是用一个useRef来保存所有子输入框的ref数组，通过子组件的ref回调来动态添加/移除元素：

import { useRef } from 'react';

const Child = ({ onRef }) => {
  return <input type="text" ref={onRef} />;
};

const DynamicForm = ({ count }) => {
  // 用useRef初始化一个空数组，存储所有子输入框的ref
  const inputRefs = useRef([]);

  // 提交时收集所有输入框的值
  const handleSubmit = (e) => {
    e.preventDefault();
    const values = inputRefs.current.map(ref => ref?.value || '');
    alert(values);
  };

  // 生成对应数量的子组件，通过onRef回调把每个输入框的ref存入数组
  const renderChildren = () => {
    return Array.from({ length: count }, (_, index) => (
      <Child 
        key={index} 
        onRef={(ref) => {
          // 确保数组对应位置的ref正确更新，避免卸载时残留
          if (ref) {
            inputRefs.current[index] = ref;
          } else {
            delete inputRefs.current[index];
          }
        }} 
      />
    ));
  };

  return (
    <form onSubmit={handleSubmit}>
      {renderChildren()}
      <input type="submit" />
    </form>
  );
};

方案二：改用受控组件（更推荐） #

React更推荐用受控组件处理表单，通过useState维护表单数据数组，每个子组件的输入值和状态双向绑定，不需要依赖ref就能直接获取数据：

import { useState } from 'react';

const Child = ({ value, onChange }) => {
  return <input type="text" value={value} onChange={onChange} />;
};

const DynamicForm = ({ count }) => {
  // 初始化对应数量的空值数组，存储每个输入框的内容
  const [formValues, setFormValues] = useState(Array(count).fill(''));

  // 单个输入框变化时，更新对应位置的状态
  const handleInputChange = (index, e) => {
    const newValues = [...formValues];
    newValues[index] = e.target.value;
    setFormValues(newValues);
  };

  // 提交时直接使用状态里的formValues
  const handleSubmit = (e) => {
    e.preventDefault();
    alert(formValues);
  };

  // 生成子组件，绑定对应的值和 onChange 事件
  const renderChildren = () => {
    return formValues.map((value, index) => (
      <Child 
        key={index} 
        value={value} 
        onChange={(e) => handleInputChange(index, e)} 
      />
    ));
  };

  return (
    <form onSubmit={handleSubmit}>
      {renderChildren()}
      <input type="submit" />
    </form>
  );
};

注意事项 #

• 原代码中Child组件的return后面直接换行会导致React自动插入分号，最终返回undefined，所以要确保JSX紧跟在return后面或者用括号包裹。
• 如果子组件数量会动态变化（比如用户可以添加/删除子组件），方案二的受控组件方式会更易维护，因为状态会自动同步组件的增删。

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