React TypeScript表单提交异常：字段值错位且状态无法清空

一、字段值错位问题 #

你遇到的""键对应telephone值、telephone字段为空的异常，核心原因是自定义Input组件未将name属性正确传递给内部原生<input>元素。

当你在Form组件中给Input传入name={option.name}时，若Input组件的实现里没有把该name绑定到原生input标签，触发handleChange时event.target.name会是空字符串，导致状态更新时把值赋给了""这个键，而telephone字段因缺少正确的name绑定，始终保持初始空值。

修复方式 #

检查并修改Input组件，确保将props中的name、value等属性传递给内部原生input：

// Input组件示例实现
interface InputProps {
  label: string;
  name: string;
  type: string;
  className?: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  value: string;
}

const Input = ({ label, name, type, className, onChange, value }: InputProps) => {
  return (
    <div className={className}>
      <label>{label}</label>
      {/* 必须绑定name和value到原生input */}
      <input 
        type={type} 
        name={name} 
        value={value} 
        onChange={onChange} 
      />
    </div>
  );
};

二、状态无法清空问题 #

调用clearState后输入框未清空，有两个关键原因：

1. handleChange存在闭包陷阱：直接使用responseBody进行状态更新，组件多次渲染后，handleChange捕获的是旧的state值，可能导致状态更新不及时。
2. Input组件未绑定value属性：若Input未接收并绑定value到原生input，它会成为非受控组件，即使状态更新，输入框也不会同步显示最新值。

修复方式 #

1. 将handleChange改为函数式更新，避免闭包问题：

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const { name, value } = event.target;
  // 使用函数式更新，确保获取最新的state
  setResponseBody(prev => ({ ...prev, [name]: value }));
};

2. 在Form组件的Input调用中添加value属性，绑定到状态对应字段：

{FormData.map((option) => (
  <Input
    key={option.name}
    label={option.label}
    type={option.type}
    className={option.className}
    name={option.name}
    // 绑定对应状态值，确保Input为受控组件
    value={responseBody[option.name as keyof FormDataType]}
    onChange={handleChange}
  />
))}

3. 保留当前clearState的实现（需确保FormData中的name与FormDataType的字段完全匹配）：

const clearState = () => {
  setResponseBody({ ...formData });
};

验证修复效果 #

完成上述修改后，提交表单时将得到预期的字段数据，且调用clearState后所有输入框会同步清空。

内容的提问来源于stack exchange，提问作者Mikołaj Wittbrodt