React TypeScript中onChangeHandler类型错误的修复方法咨询

错误根源 #

1. 初始状态formContent为undefined，首次触发onChange时，展开...formContent会得到空对象{}，不符合AddressForm/PhoneForm的类型要求（两者都包含必填字段）。
2. phoneNumber是number类型，但输入框返回的value是字符串，直接赋值会导致类型不匹配。
3. 未限制name属性只能是表单接口中的合法字段，存在类型安全隐患。

修复步骤 #

1. 初始化合法的表单状态

取消undefined初始值，根据isCase1直接初始化对应类型的表单结构，确保状态始终符合类型约束：

const [formContent, setFormContent] = useState<AddressForm | PhoneForm>(
  isCase1 ? { name: "", address: "" } : { name: "", phoneNumber: 0 }
);

2. 修正onChangeHandler的类型与逻辑

• 限制输入字段名只能是表单接口的合法键
• 转换phoneNumber的字符串输入为数字类型
• 通过类型守卫确保更新后的状态符合对应表单类型

const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { name, value } = e.target;
  type FormField = keyof AddressForm | keyof PhoneForm;
  const field = name as FormField;

  setFormContent(prev => {
    // 处理phoneNumber的类型转换，空输入默认设为0避免NaN
    const updatedValue = field === "phoneNumber" ? Number(value) || 0 : value;

    // 用类型守卫判断当前表单类型，返回对应结构的更新对象
    if ("address" in prev) {
      return { ...prev, [field]: updatedValue } as AddressForm;
    } else {
      return { ...prev, [field]: updatedValue } as PhoneForm;
    }
  });
};

3. 优化输入框取值逻辑

由于初始状态已合法，可直接读取字段值，无需处理undefined情况：

return (
  <form>
    <input
      type="text"
      name="name"
      value={formContent.name}
      onChange={onChangeHandler}
    />
    {isCase1 ? (
      <input
        type="text"
        name="address"
        value={formContent.address}
        onChange={onChangeHandler}
      />
    ) : (
      <input
        type="number"
        name="phoneNumber"
        value={formContent.phoneNumber}
        onChange={onChangeHandler}
      />
    )}
  </form>
);

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