React表单hidden input隐藏域无法将值传递到服务器如何解决？

问题排查与解决方法 #

1. 修复状态同步逻辑 #

你的代码存在核心逻辑偏差：隐藏输入的value绑定的是myJSON变量，但提交时读取的是cart状态值，且隐藏输入没有绑定事件同步状态。
普通文本输入通过onChange触发状态更新，但隐藏输入不会触发用户交互事件，你需要在myJSON更新时主动同步到cart状态：

// 每当购物车数据（对象数组）发生变更时执行
const myJSON = JSON.stringify(cartArray); // 把对象数组转为合法JSON字符串
setCart(myJSON);

同时简化隐藏输入的绑定逻辑，直接绑定cart状态即可：

<input type="hidden" name="cart" value={cart} />

2. 验证编码逻辑正确性 #

你使用了application/x-www-form-urlencoded格式提交，JSON字符串中的特殊字符需要正确编码：

• 先在handleSubmit开头打印cart值，确认提交前状态值正常：

const handleSubmit = (e) => {
  e.preventDefault();
  console.log('待提交的cart值：', cart);
  // 原有校验逻辑...
}

• 优先使用原生URLSearchParams构造请求体，避免自定义encode函数的bug：

fetch('/', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    'form-name': 'landing-form',
    name: name.trim(),
    email: email,
    phone: phone,
    company: company,
    message: message,
    cart: cart,
  }),
})

3. 校验Netlify表单配置 #

由于你使用了Netlify表单能力，需确认两点：

• 静态HTML模板中必须存在name="cart"的字段，Netlify会自动过滤未在静态表单中声明的动态字段
• 登录Netlify后台查看landing-form的字段配置，确认cart字段没有被拦截规则过滤

4. 网络请求兜底验证 #

打开浏览器开发者工具的「网络」面板，找到提交的POST请求，查看请求负载：

• 如果请求中已存在cart字段和正确值，问题出在服务端解析逻辑
• 如果请求中没有cart字段，回到第一步重新检查状态同步逻辑

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