动态创建表单字段时受控组件转非受控问题排查与修复

原实现方案的核心问题 #

1. 初始State缺失默认值：动态生成的表单行字段未设置初始空值，新增行时字段值为undefined，导致输入组件从受控（有明确值）变为非受控（值为undefined），触发React警告。
2. State更新逻辑不规范：更新表单行数据时，未正确拷贝数组与对象，可能导致State更新异常，最终提交时无法获取正确的表单值。

具体修复步骤 #

1. 初始化带默认值的表单State #

确保每一行的字段都有初始空字符串，避免undefined：

import { useState } from 'react';

type FormRow = {
  name: string;
  age: string;
};

export default function App() {
  // 初始行的字段均设为空字符串
  const [formValues, setFormValues] = useState<{ rows: FormRow[] }>({
    rows: [{ name: '', age: '' }]
  });

2. 规范新增行逻辑 #

新增行时，添加带有默认空值的对象：

const addRow = () => {
  setFormValues(prev => ({
    ...prev,
    rows: [...prev.rows, { name: '', age: '' }]
  }));
};

3. 正确处理输入变更 #

精准定位行与字段，确保更新后的值始终为明确值：

const handleInputChange = (index: number, field: keyof FormRow, value: string) => {
  setFormValues(prev => {
    const updatedRows = [...prev.rows];
    // 拷贝原行对象，避免直接修改State
    updatedRows[index] = {
      ...updatedRows[index],
      [field]: value
    };
    return { ...prev, rows: updatedRows };
  });
};

4. 安全处理行删除逻辑 #

确保至少保留一行，避免空数组引发的异常：

const removeRow = (index: number) => {
  setFormValues(prev => {
    if (prev.rows.length <= 1) return prev;
    const updatedRows = prev.rows.filter((_, i) => i !== index);
    return { ...prev, rows: updatedRows };
  });
};

5. 提交时直接获取正确State #

此时formValues.rows已正确维护所有表单行数据：

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  console.log('提交的表单数据：', formValues.rows);
};

错误原因说明 #

React警告"A component is changing a controlled input to be uncontrolled"的本质是：受控组件的value属性从**明确值（如空字符串）**变为undefined。原方案中新增行时未给字段设置默认值，或更新State时错误赋值为undefined，导致React判定组件状态异常。

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