JavaScript如何编码解析含嵌套对象数组的查询字符串 适配Netlify提交

你遇到的问题本质是默认的x-www-form-urlencoded格式没有统一的嵌套对象/数组序列化标准，自定义递归编码很容易出现格式错误，推荐优先用更稳妥的JSON序列化方案，无需引入第三方库，改造成本极低。

前端编码修改 #

直接把对象、数组类型的字段序列化为JSON字符串后再编码，修改后的encode函数如下：

const encode = (data) => {
  return Object.keys(data).map(key => {
    let val = data[key]
    // 所有对象/数组统一转JSON字符串
    if (val !== null && typeof val === 'object') {
      val = JSON.stringify(val)
    }
    return `${encodeURIComponent(key)}=${encodeURIComponent(val)}`
  }).join('&')
}

你原有代码里的replace(/\s/g, '_')如果是业务需要可以保留，加在val = JSON.stringify(val)之后即可。

后端Netlify函数解码修改 #

收到的days字段是JSON字符串，先做一次JSON解析再处理即可：

if (isAddRegistrationForm) {
  // 新增：把序列化的days字符串转为对象数组
  const daysArr = JSON.parse(payload.data.days)
  let schedule = daysArr.map(d => (
    {
      _key: nanoid(),
      _type: "classDayTime",
      day: d.day,
      time: {
        _type: "timeRange",
        start: d.start,
        end: d.end
      }
    }
  ))
  // 后续逻辑保持不变
}

可选：使用qs库的方案 #

如果一定要用标准的表单嵌套格式，可按以下方式调整：

1. 前端安装qs库后，直接替换原有encode逻辑：

import qs from 'qs'
// handlePost里的body直接替换为：
body: qs.stringify({ "form-name": 'add-registration-form', ...formData }, { arrayFormat: 'indices' }),

2. 后端如果自动解析的payload结构不符合预期，可直接读取原始body用qs解析：

const qs = require('qs')
// handler内新增
const parsedBody = qs.parse(event.body)
const daysArr = parsedBody.days

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