React TypeScript表单提交时更新数组状态报错，求解决方法

问题分析 #

你遇到的两个错误核心都是TypeScript无法推断出数组状态的正确类型：

• 初始将state设为{}时，TS认定它是对象类型，但你更新时要改成数组，类型不匹配触发TS2461。
• 改成useState([])后，TS因没有明确类型标注，默认推断为never[]（表示空数组且不允许添加任何类型元素），但你更新时返回的是包含具体结构的对象数组，和never[]类型冲突，触发TS2345。

解决步骤 #

1. 定义数组元素的类型接口 #

先明确你要存入数组的对象结构，创建对应的TypeScript接口：

interface IDataItem {
  name: string;
  type1: ServiceTypeEnum;
  type2: ServiceTypeEnum;
  id: number;
}

2. 给useState指定泛型类型 #

初始化数组状态时，通过泛型明确dataArray是IDataItem[]类型，初始值设为[]：

const [dataArray, setDataArray] = useState<IDataItem[]>([]);

3. 修正表单数据的类型问题 #

你代码中IProductName的serviceType定义为ServiceTypeEnum，但提交时却用了data.serviceType[0]和data.serviceType[1]，这说明serviceType应该是枚举值的数组，需要修正接口：

interface IProductName {
  name: string;
  serviceType: ServiceTypeEnum[]; // 改为数组类型
}

完整修正后的代码 #

enum ServiceTypeEnum {
  Replace = 'replace product',
  Fix = 'fix product',
}

interface IProductName {
  name: string;
  serviceType: ServiceTypeEnum[]; // 修正为数组类型
}

interface IDataItem {
  name: string;
  type1: ServiceTypeEnum;
  type2: ServiceTypeEnum;
  id: number;
}

const index: FC<Props> = ({ className, ...props }) => {
  // 明确指定state的泛型类型
  const [dataArray, setDataArray] = useState<IDataItem[]>([]);

  const onSubmit: SubmitHandler<IProductName> = data => {
    console.log(data.serviceType);
    setDataArray(prev => [
      ...prev,
      {
        name: data.name,
        type1: data.serviceType[0],
        type2: data.serviceType[1],
        id: Date.now(),
      },
    ]);
    console.log(dataArray); // 修正变量名dArray为dataArray

    if (data.serviceType.length !== 0 && data.name !== '') {
      console.log(data);
    } else {
      alert('choose name and at least one type');
    }
  };

  // 补充组件返回内容（原代码省略部分）
  return <div className={className} {...props}></div>;
};

额外提示 #

• TypeScript的核心是类型明确性，使用useState时如果初始值无法让TS推断出正确类型，一定要手动指定泛型。
• 提交逻辑中可以添加边界判断（比如data.serviceType.length >=2），避免data.serviceType[1]出现undefined的类型风险。

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