React中e.preventDefault()带多参数调用报undefined错误如何解决？

报错的根本原因是你调用addCustomer函数时没有传入事件对象e：你在提交按钮的onClick回调中只传了name、address两个参数，函数接收的第三个参数e为undefined，调用preventDefault自然触发类型错误。

两种修复方案选其一即可：

• 方案1：修改按钮点击回调，手动传入事件对象
  将提交按钮代码修改为：

  <button type="submit" onClick={(e) => addCustomer(name, address, e)}>Add</button>
  

• 方案2（更规范）：将提交事件绑定到form标签，符合表单交互标准
  先修改form标签代码：

  <form onSubmit={(e) => addCustomer(name, address, e)}>
  

  再删除提交按钮上的onClick属性，type="submit"的按钮点击时会自动触发form的submit事件，不需要单独给按钮绑定点击事件。

你可以用axios的post请求将参数放在请求体中提交给后端，不要用get请求传表单数据，修改addCustomer函数即可：

async function addCustomer(name, address, e){
  e.preventDefault();
  // 向后端发送post请求，第二个参数就是要提交的请求体数据
  await axios.post('/customers/add', {
    name,
    address
  })
  // 提交成功后刷新页面更新列表
  window.location.reload()
}

后端对应的接口只要配置支持接收JSON格式的POST请求参数，就能直接拿到你传的name和address值。

额外优化建议：删除客户的removeCustomer方法最好改用axios.delete请求，而不是get请求，符合RESTful接口规范，避免爬虫、缓存等场景误触发删除操作。

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