Netlify Forms唯一name输入项提交后解析为同名key问题咨询

问题原因 #

Netlify Forms默认会在项目构建阶段静态扫描HTML文件中的表单结构，提前识别所有字段的name属性作为后台的字段key。你的表单字段是通过React组件动态渲染的，构建输出的初始HTML中不存在这些<input>标签，导致Netlify无法正确识别你所有的字段结构，就会出现字段合并、key重复的问题。另外你的所有TextInput组件的id属性都是固定值outlined-size-normal，重复的id也会干扰Netlify的字段识别逻辑。

解决步骤 #

• 修复TextInput组件的id重复问题，把id改成和name一致的动态值

import { TextField } from "@material-ui/core"
import * as styles from "../styles/TextInput.module.css"

const TextInput = ({ label }) => {
  return (
    <TextField
      label={label}
      name={label}
      // 替换固定id为动态值，保证每个输入框id唯一
      id={`input-${label.toLowerCase()}`}
      variant="outlined"
      size="small"
      className={styles.input}
    />
  )
}

export default TextInput

• 给Netlify提供静态的表单结构定义，二选一即可：
  方案1：在项目的public目录下新增一个静态HTML文件（可命名为netlify-forms.html），内容如下，不需要在页面中引用该文件，Netlify构建时会自动扫描识别：

<form name="contato" data-netlify="true" hidden>
  <input type="hidden" name="form-name" value="contato" />
  <input type="text" name="Nome" />
  <input type="email" name="Email" />
  <input type="tel" name="Telefone" />
  <input type="text" name="Assunto" />
  <textarea name="Mensagem"></textarea>
</form>

方案2：直接在React表单组件内添加一组隐藏的静态input，所有字段的name和实际使用的一致，构建时这些静态标签会出现在输出的HTML中，Netlify即可正常识别：
在Contato组件的<form>标签内，原有form-name隐藏输入项下方添加以下代码：

<input type="hidden" name="Nome" />
<input type="hidden" name="Email" />
<input type="hidden" name="Telefone" />
<input type="hidden" name="Assunto" />
<input type="hidden" name="Mensagem" />

• 修改完成后重新部署项目，后续提交的表单就会在Netlify后台正确显示每个字段的对应key。

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