React项目用Material-UI、react-hook-form时TextField的onChange重复报错如何解决

错误原因 #

'onChange' is specified more than once, so this usage will be overwritten.ts(2783) formComponent.tsx(33, 15): This spread always overwrites this property.

这个报错的根本原因是：react-hook-form的register()方法返回的对象内置了onChange、onBlur、ref三个属性，用来实现表单状态的自动收集校验。你代码里先显式声明了onChange属性，之后又展开register的返回值，后者的onChange会直接覆盖前者的定义，所以TS会抛出覆盖警告。

另外你这里存在一个使用误区：handleSubmit是react-hook-form提供的表单提交回调处理方法，应该绑定在form表单的onSubmit属性上，不应该绑定到单个输入框的onChange事件中。

解决方案 #

方案1：将自定义逻辑写入register的配置项（最推荐） #

register支持传入自定义的onChange回调，会在react-hook-form默认的状态更新逻辑执行后触发，不会破坏原有表单状态收集：

// 先把handleSubmit移到form的onSubmit上
<form onSubmit={handleSubmit((data) => console.log(data))}>
  <TextField
    variant="standard"
    defaultValue={projectData.name}
    {...register('name', { 
      required: true,
      // 如果确实需要在输入值变化时执行自定义逻辑，写在这里
      onChange: (e) => {
        // 自定义逻辑，比如实时校验、联动其他字段等
        console.log('当前输入值：', e.target.value)
      }
    })}
    error={!!errors.name}
  />
  <button type="submit">提交</button>
</form>

方案2：手动解构合并onChange逻辑 #

如果需要更灵活的控制逻辑执行顺序，可以手动解构register的返回值，在自定义onChange中先调用react-hook-form的内置onChange：

const { onChange: rhfOnChange, ...registerRest } = register('name', { required: true })

// 组件内写法
<TextField
  variant="standard"
  defaultValue={projectData.name}
  onChange={(e) => {
    rhfOnChange(e) // 先调用react-hook-form的内置逻辑，保证表单状态正常更新
    // 你的自定义逻辑
    console.log('输入变化：', e.target.value)
  }}
  {...registerRest}
  error={!!errors.name}
/>

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