React中发送请求前如何自动清除表单state内的空值属性

以下是两种不需要每次手写循环删除空属性的实现方案： #

方案1：封装通用工具函数全局复用 #

将过滤空属性的逻辑抽离为公共工具函数，所有表单提交场景都可以直接调用，无需重复编写循环逻辑：

// 全局公共工具函数，可根据业务需求调整过滤规则
const removeEmptyProps = (obj) => {
  return Object.fromEntries(
    Object.entries(obj).filter(([_, value]) => {
      // 保留数字0、布尔false等合法值，仅过滤空字符串、null、undefined、全空格输入
      if (typeof value === 'number' || typeof value === 'boolean') return true
      return value?.trim()
    })
  )
}

在提交逻辑中直接调用即可：

const submitHandler = (e) => {
  e.preventDefault();
  const userWithoutEmptyProperties = removeEmptyProps(user)
  // 直接向服务端发送处理后的对象即可
}

方案2：使用表单管理库原生支持自动过滤 #

如果项目中可以引入第三方库，使用React Hook Form这类专业表单管理库可以从底层实现空值自动过滤，同时还能自带表单验证、性能优化等能力：

import { useForm } from 'react-hook-form'

const UserAdd = () => {
  const { register, handleSubmit } = useForm({
    shouldUnregister: true // 开启后未填写/空值字段会自动从提交数据中剔除
  })

  // 此处拿到的data已经是过滤完空属性的结果
  const submitHandler = (data) => {
    console.log(data) // 示例中如果name为空，输出就是 {age: "19"}
    // 直接发请求即可
  }

  return (
    <form onSubmit={handleSubmit(submitHandler)} >
      <input type="text" name="name" {...register('name')} />
      <input type="text" name="age" {...register('age')} />
      <button type="submit">Add</button>
    </form>
  )
}

注意：不建议在输入框 onChange 事件中就删除空属性，会导致后续无法做「必填项为空」的表单校验提示，建议统一在提交前的节点处理过滤逻辑。

内容的提问来源于stack exchange，提问作者R.M. Reza