React+TS数组concat类型不匹配报错，请求解决方案

错误根源 #

你触发类型错误的核心原因是**{uf}对象的结构和SpecialtiesListProps接口不匹配**：id数组被定义为SpecialtiesListProps[]，每个元素必须包含specialtyId和rqe两个属性，但你拼接的{uf}只有uf属性，完全不符合接口要求。同时代码里还存在异步状态更新的逻辑问题——你先调用setId修改数组，随后又用原id数组执行concat，这会导致状态被错误覆盖。

解决方案分两种场景处理： #

场景1：每个专业条目需要包含uf属性

如果业务逻辑要求每个SpecialtiesListProps对象都携带uf字段，直接修改接口并调整状态更新逻辑：

interface SpecialtiesListProps {
  specialtyId: number;
  rqe: string;
  uf: string; // 新增uf属性
}

const [id, setId] = useState<SpecialtiesListProps[]>([]);
const [uf, setUf] = useState('');

const handleChange = (value: string, SpecialtyId: number) => {
    const newIdFilter = id.find((item) => item.specialtyId === SpecialtyId);
    let updatedIds;
    
    if (!newIdFilter) {
      // 新增条目时携带当前uf值
      updatedIds = [...id, {specialtyId: SpecialtyId, rqe: value, uf}];
    } else {
      updatedIds = id.map((item) => {
        if (item.specialtyId === SpecialtyId) {
          // 更新条目时保留原uf（或替换为当前uf，根据业务需求调整）
          return {...item, rqe: value};
          // 若需同步最新uf，改为：return {...item, rqe: value, uf};
        } else {
          return item;
        }
      });
    }   
    // 仅调用一次setId完成状态更新
    setId(updatedIds);
};

场景2：uf是全局独立属性，不属于专业条目

如果uf是独立的全局筛选/配置项，不需要绑定到每个专业条目，直接移除错误的concat操作，单独维护uf状态即可：

interface SpecialtiesListProps {
  specialtyId: number;
  rqe: string;
}

const [id, setId] = useState<SpecialtiesListProps[]>([]);
const [uf, setUf] = useState('');

const handleChange = (value: string, SpecialtyId: number) => {
    const newIdFilter = id.find((item) => item.specialtyId === SpecialtyId);
    
    if (!newIdFilter) {
      setId([...id, {specialtyId: SpecialtyId, rqe: value}]);
    } else {
      setId(
        id.map((item) => {
          if (item.specialtyId === SpecialtyId) {
            return {specialtyId: Number(item.specialtyId), rqe: value};
          } else {
            return item;
          }
        }),
      );
    }   
    // 移除错误的concat操作，uf单独维护在自身状态中
    // 后续使用时（如提交表单），可将id数组与uf一起传递：{ specialties: id, uf }
};

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