React中如何在同一个handleSubmit函数中实现表单数据新增与编辑功能

你可以通过判断editContactId的状态来区分操作类型，直接将两份逻辑合并到handleSubmit函数中即可。另外注意你原有addData函数存在语法错误：setContacts被错误嵌套到了setAddFormData的入参中，合并后的代码已经修复了该问题。

合并后的handleSubmit代码 #

const handleSubmit = () => {
  // 先基于表单数据生成通用的联系人对象
  const contactData = {
    firstname: addFormData.firstname,
    lastname: addFormData.lastname,
    surname: addFormData.surname,
    mailid: addFormData.mailid,
    company: addFormData.company,
  }

  if (editContactId === null) {
    // 新增逻辑
    const newContact = {
      ...contactData,
      // 注：用数组长度生成id仅适合无删除操作的场景，如果后续要加删除功能，建议替换为 Date.now() 避免id重复
      id: contacts.length + 1
    }
    setContacts([...contacts, newContact])
  } else {
    // 编辑逻辑
    const editedContact = {
      ...contactData,
      id: editContactId
    }
    setContacts(contacts.map(contact => 
      contact.id === editContactId ? editedContact : contact
    ))
    // 清空编辑状态
    setEditContactId(null)
  }

  // 统一清空表单
  setAddFormData({
    firstname: "",
    lastname: "",
    surname: "",
    mailid: "",
    company: "",
  })
}

逻辑说明 #

• 判断条件非常简单：editContactId为null时是新增状态，有值时是编辑状态，符合你现有状态的设计逻辑
• 编辑逻辑用map方法替换了原来的数组拷贝+查找索引的写法，更简洁符合React的immutable写法规范
• 表单清空、公共数据提取都抽离到了条件判断外，减少冗余代码
• 你现有的提交按钮代码不需要做任何修改，直接绑定这个handleSubmit方法即可正常使用

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