React+TypeScript动态表单报错：目标仅允许1个元素但源元素过多

问题根源 #

你把featureList声明为固定长度为1的元组类型，但实际业务需要动态添加元素，导致添加后数组长度超过元组限制，触发类型错误。

解决方案 #

将featureList的类型从固定元组改为动态数组类型，具体步骤如下：

1. 修改FormValues接口
   把元组类型[{featureName: string; deliverables: string[]; }]替换为数组类型：

interface FormValues {
  // 其他表单字段...
  featureList: {
    featureName: string;
    deliverables: string[];
  }[]; // 改为数组类型，支持任意长度
}

2. 初始化表单状态
   初始化时的单元素数组依然符合新类型要求，无需修改：

const [formValues, setFormValues] = useState<FormValues>({
  // 其他初始值...
  featureList: [{ featureName: '', deliverables: [] }]
});

3. 调整handleAddFeature函数
   原来的数组扩展逻辑现在会完全匹配类型，不会再触发错误：

const handleAddFeature = () => {
  setFormValues(prev => ({
    ...prev,
    featureList: [...prev.featureList, { featureName: '', deliverables: [] }]
  }));
};

额外优化（可选） #

如果业务需要保证featureList至少有1个元素（不允许为空数组），可以用可变长度的非空元组类型替代普通数组：

type Feature = { featureName: string; deliverables: string[] };
// 定义至少包含1个元素、可动态扩展的元组类型
type NonEmptyFeatureList = [Feature, ...Feature[]];

interface FormValues {
  // 其他表单字段...
  featureList: NonEmptyFeatureList;
}

这种类型既满足了"至少一个元素"的约束，又支持动态添加新元素，完美适配你的业务场景。

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