为何报错Failed to construct 'FormData': 参数1非HTMLFormElement类型？

报错信息 #

Unhandled Runtime Error TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

问题代码 #

提交处理函数 #

const handleSubmit = (e) => {
    e.preventDefault();
    console.log(e.target);
    var data = new FormData(e.target);
}

表单渲染代码 #

<form className='signup-form' onSubmit={handleSubmit}>
  <div className='form-group'>
    <label>{translations[language]['g29']}*</label>
    <input
      type='text'
      className='form-control'
      placeholder={translations[language]['g91']}
      id='name'
      required={true}
      name='name'
      data-error='Please enter your name'
    />
  </div>
  <div className='form-group'>
    <label>{translations[language]['g61']}*</label>
    <input
      type='text'
      className='form-control'
      placeholder={translations[language]['g92']}
      id='surname'
      required={true}
      name='surname'
      data-error='Please enter your Surname'
    />
  </div>

  <div className='form-group'>
    <label>{translations[language]['g24']}*</label>
    <input
      type='email'
      className='form-control'
      placeholder={translations[language]['g42']}
      id='email'
      required={true}
      name='email'
    />
  </div>

  <div className='form-group'>
    <label>{translations[language]['g43']}*</label>
    <input
      type='password'
      className='form-control'
      placeholder={translations[language]['g44']}
      id='password'
      required={true}
      name='password'
    />
  </div>
  <div className='form-group'>
    <label>{translations[language]['g43']}*</label>
    <input
      type='password'
      className='form-control'
      placeholder={translations[language]['g93']}
      id='passwordControl'
      required={true}
      name='passwordControl'
    />
  </div>
  <div className='form-group'>
    <label>{translations[language]['g94']}</label>
    <div style={{ display: 'flex' }}>
      <div style={{ marginRight: '8px', display: 'flex', alignItems: 'center' }}>
        <input
          type='radio'
          style={{ marginRight: 6 }}
          name='gender'
          id="female"
          required={true}
        />
        <div>{translations[language]['g95']}</div>
      </div>

      <div style={{ marginRight: '8px', display: 'flex', alignItems: 'center' }}>
        <input
          type='radio'
          style={{ marginRight: 6 }}
          name='gender'
          id="male"
          required={true}
        />
        <div>{translations[language]['g96']}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <input
          type='radio'
          style={{ marginRight: 6 }}
          name='gender'
          id="other"
          required={true}
        />
        <div>{translations[language]['g97']}</div>
      </div>
    </div>
  </div>

  <button onClick={handleSubmit} type='submit' className='btn btn-primary'>
    {translations[language]['g53']}
  </button>
  <Link href='/'>
    <a className='return-store'>{translations[language]['g51']}</a>
  </Link>
</form>

问题原因 #

按钮上同时绑定了onClick={handleSubmit}和表单的onSubmit={handleSubmit}。点击按钮时，onClick事件先触发，此时e.target是按钮元素，而非表单元素，传入FormData时不符合参数类型要求，导致报错。后续表单的onSubmit事件因报错无法正常触发。

解决方案 #

移除按钮上的onClick={handleSubmit}绑定，仅保留表单的onSubmit={handleSubmit}即可。因为type='submit'的按钮会自动触发表单的提交事件，无需额外绑定点击事件。

修改后的按钮代码：

<button type='submit' className='btn btn-primary'>
  {translations[language]['g53']}
</button>

内容的提问来源于stack exchange，提问作者Eda Avcuoğlu