使用「添加更多」功能时表单提交数组无法修改的问题

嘿，这个动态添加表单字段后后端数组异常的问题我碰到过好多次了，核心问题基本都出在表单字段的命名规则上，我给你拆解下问题和解决办法：

为什么会出现异常？ #

如果你的表单字段用的是普通命名（比如name="firstName"），每次点击“添加更多”生成新字段时，新字段的name和旧字段完全一致。当表单提交时，后端要么只会接收到最后一组字段的值，要么把所有同名字段的值拼成一个扁平数组（比如所有firstName挤在一个数组里，和lastName的数组对应不上），自然就会出现你说的数组异常。

正确的前端字段命名方式 #

要让后端能识别出这是一组组关联的字段，你需要把字段的name属性设置成嵌套数组格式，有两种常用写法：

方式1：自动索引的数组格式 #

这种写法不需要手动管理索引，后端会自动把同组的字段归到一个对象里：

<!-- 第一组字段 -->
<input type="text" name="users[][firstName]" value="FirstNameOne">
<input type="text" name="users[][lastName]" value="LastNameOne">
<input type="email" name="users[][email]" value="EmailOne">
<input type="text" name="users[][status]" value="StatusOne">

<!-- 第二组字段 -->
<input type="text" name="users[][firstName]" value="FirstNameTwo">
<input type="text" name="users[][lastName]" value="LastNameTwo">
<input type="email" name="users[][email]" value="EmailTwo">
<input type="text" name="users[][status]" value="StatusTwo">

<!-- 第三组字段 -->
<input type="text" name="users[][firstName]" value="FirstNameThree">
<input type="text" name="users[][lastName]" value="LastNameThree">
<input type="email" name="users[][email]" value="EmailThree">
<input type="text" name="users[][status]" value="StatusThree">

方式2：手动指定索引的数组格式 #

如果需要明确控制每组的索引（比如支持删除中间组后重新排序），可以给每个组指定索引值：

<!-- 第一组（索引0） -->
<input type="text" name="users[0][firstName]" value="FirstNameOne">
<input type="text" name="users[0][lastName]" value="LastNameOne">
...

<!-- 第二组（索引1） -->
<input type="text" name="users[1][firstName]" value="FirstNameTwo">
<input type="text" name="users[1][lastName]" value="LastNameTwo">
...

这种方式需要在添加新字段时自动递增索引值；如果删除某组，还要重新调整剩余组的索引，避免出现数组空洞。

后端如何正确接收？ #

不同后端语言的解析方式略有不同，但只要前端命名正确，都能拿到结构化的数组：

• PHP：直接通过$_POST['users']获取，会得到一个包含3个元素的数组，每个元素是关联数组（比如$_POST['users'][0]['firstName']就是第一组的名字）。
• Node.js（Express）：需要确保启用了express.urlencoded({ extended: true })中间件，然后通过req.body.users获取结构化数组。
• Python（Django）：Django的表单会自动解析这种数组格式，只要在表单类中定义对应的FormSet即可。

常见坑点要避开 #

• 不要混用两种命名格式，比如一组用users[][firstName]，另一组用users[1][firstName]，会导致后端解析混乱。
• 如果用手动索引，删除字段后一定要重新同步索引，否则后端会拿到带有空元素的数组。
• 后端要确保开启了嵌套数据的解析功能（比如Express的extended: true），否则只能拿到扁平的键值对。

按这个方式调整后，后端就能正确接收到包含3组完整字段的数组啦！

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