React调用PUT接口更新对象 仅修改单个属性其余保留的实现方案

1. 你的更新状态初始值设为空字符串，用户未修改对应输入框时，提交的对应字段值为空，传给后端后就会覆盖原有值为undefined。
2. 标准PUT请求为全量替换资源逻辑，若仅需更新部分字段，要么后端支持PATCH增量更新接口，要么前端提交时自动补全未修改的原有字段值。

直接将现有图书的原有值作为状态初始值，即使用户未修改对应字段，提交时也会携带原有值，不会冲掉原有数据。
修改状态初始化代码即可：

// 将原来的空值初始值替换为原有图书属性
const [updateNewBookTitle, setNewUpdateBookTitle] = useState(bookTitle);
const [updateNewBookStart, setNewUpdateBookStart] = useState(bookStart);
const [updateNewBookEnd, setNewUpdateBookEnd] = useState(bookEnd);

仅收集用户修改过的字段提交，减少请求体积也不会影响未修改字段：

1. 修改updateBook接口封装，将参数从3个固定字段改为接收一个包含待更新字段的对象，请求方式改为PATCH（如果后端支持）。
2. 修改组件内的更新逻辑：

const onUpdateBook = async (id) => {
  // 仅收集修改过的字段
  const updateFields = {}
  if (updateNewBookTitle !== bookTitle) updateFields.title = updateNewBookTitle
  if (updateNewBookStart !== bookStart) updateFields.start = updateNewBookStart
  if (updateNewBookEnd !== bookEnd) updateFields.end = updateNewBookEnd
  // 无修改直接终止提交
  if (Object.keys(updateFields).length === 0) return

  const responseStatus = await updateBook(id, updateFields)
  if (responseStatus !== 200) {
    alert("更新失败")
    return
  }
  // 本地状态合并更新
  setBooks(previousBooks => previousBooks.map(book => 
    book.id === id ? {...book, ...updateFields} : book
  ))
}

3. 修复表单提交默认刷新问题，修改表单提交事件：

<form onSubmit={(e) => {
  e.preventDefault()
  onUpdateBook(bookId)
}}>

• 现有代码中3个TextField的id属性重复，不符合HTML规范，建议改为title-${bookId}、start-${bookId}这类带唯一标识的命名。
• 输入框可以添加非空校验，避免提交无效值。

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