React+TS开发宝可梦表单报Property 'value'缺失错误排查

Property 'value' is missing in type '{ [x: string]: { value: string; }; }' but required in type 'Field'.

报错出在handleInputChange函数的类型定义和逻辑写法上：

• 你声明newField的类型是Field，按照之前的类型定义，Field类型的对象必须直接包含value属性。但实际赋值的是{[fieldName]: { value: fieldValue }}——这是一个以动态字段名为键、值为{value: string}的对象，外层根本没有value属性，TypeScript类型校验直接不通过。
• 除此之外这段逻辑还有隐藏问题：更新表单项时会直接覆盖掉对应字段原有的isValid等属性，后续加表单验证规则时会出异常。

1. 修正handleInputChange函数：

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
  const fieldName = e.target.name as keyof Form;
  const fieldValue = e.target.value;
  // 保留原字段的所有属性，仅更新value值
  const updatedField: Field = {
    ...form[fieldName],
    value: fieldValue
  };

  setForm({
    ...form,
    [fieldName]: updatedField
  });
}

2. 建议同步修正selectType函数里的同类问题，避免丢失字段原有属性：

const selectType = (type: string, e:React.ChangeEvent<HTMLInputElement>): void => {
  const checked = e.target.checked;
  let newTypeList: string[];

  if(checked) {
    newTypeList = form.types.value.concat([type]);
  } else {
    newTypeList = form.types.value.filter((currentType: string) => currentType !== type);
  }
  // 保留types字段原有属性，仅更新value
  const updatedField: Field = {
    ...form.types,
    value: newTypeList
  }

  setForm({ ...form, types: updatedField });
}

• 代码里用as keyof Form把动态取到的fieldName限定为Form类型已有的字段名（name/hp/cp/types），TypeScript会自动帮你校验input标签上的name属性拼写是否正确，提前排查低级错误。
• 更新状态时先展开对应字段的原有属性，不会丢失之前存储的isValid状态、后续要新增的错误提示信息，表单扩展时不会出逻辑问题。

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