React表单提交对象键序错乱 如何按formData数组固定键顺序

基于对象数组formData生成供应用用户填写的表单，数组中每个对象都配置了对应的校验规则等属性。用户填写表单后会生成新的表单对象发送至后端，若用户按表单默认顺序依次填写，生成的对象键值顺序符合预期；但如果用户中途返回修改已填的表单项值，最终生成的对象键顺序就会出现错乱。

原始表单配置数组 #

const formData = [
  {
    name: 'One',
    validation: 'Number',
  },
  {
    name: 'Two',
    validation: 'Number',
  },
  {
    name: 'Three',
    validation: 'Number',
  },
  {
    name: 'Four',
    validation: 'Number',
  }
]

表单状态与更新逻辑 #

通过React的useState维护新表单对象状态，通过handleChange方法处理表单项值变更：

const [newForm, setNewForm] = useState({})

const handleChange = (e) => {
  const { name, value } = e.target
  setNewForm({ ...newForm, [name]: parseFloat(Number(value).toFixed(2)) })
}

预期的正确对象结构 #

newForm = {
  One: 1,
  Two: 2,
  Three: 3,
  Four: 4,
}

实际出现的顺序错乱对象结构 #

newForm = {
  Two: 2,
  One: 1,
  Four: 4,
  Three: 3,
}

JavaScript普通对象的键遍历遵循固定规则：先按升序排列所有整数类型的索引键，再按属性创建的先后顺序排列字符串、Symbol类型的键。
现有更新逻辑每次修改字段时，都是通过展开旧对象+覆盖目标字段的方式生成新对象，被修改的字段相当于被重新创建，会被排到对象键列表的末尾，最终导致整体顺序错乱。

以下两种方案都可以保证最终生成的表单对象键顺序和原始formData配置完全一致，按需选择即可：

方案1：输出/提交时按配置重组对象 #

不需要修改日常表单更新逻辑，只在需要使用表单数据（如提交后端、序列化导出）的节点，遍历原始formData配置数组，按数组内的字段顺序组装最终对象，改造成本最低：

// 表单提交逻辑
const handleSubmit = () => {
  // 按配置顺序组装最终提交对象
  const orderedForm = formData.reduce((result, fieldConfig) => {
    // 仅收集用户已填写的字段，避免塞入未填的空值字段
    if (Object.prototype.hasOwnProperty.call(newForm, fieldConfig.name)) {
      result[fieldConfig.name] = newForm[fieldConfig.name]
    }
    return result
  }, {})

  // 后续使用orderedForm提交即可，顺序永远与配置一致
  console.log(orderedForm)
}

方案2：初始化状态时预定义所有键顺序 #

在初始化表单状态时，提前遍历formData数组创建好所有字段，设置好初始默认值，后续修改字段时仅更新值，不会改变键的创建顺序，从根源上避免顺序错乱：

// 初始化阶段就按配置顺序生成所有键
const initialFormValue = formData.reduce((result, fieldConfig) => {
  // 可根据业务需求设置初始值，比如空字符串''、null等
  result[fieldConfig.name] = undefined
  return result
}, {})
const [newForm, setNewForm] = useState(initialFormValue)

// 原有handleChange逻辑无需任何修改
const handleChange = (e) => {
  const { name, value } = e.target
  setNewForm({ ...newForm, [name]: parseFloat(Number(value).toFixed(2)) })
}

注意：如果表单支持动态增减字段，每次字段配置变更后需要同步更新表单状态的结构，保证键顺序和最新配置一致。

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