React中如何提交动态生成的单选框与复选框数据？

你的代码存在几个核心问题导致无法正确提交数据：

1. 初始化的FormData是空的，没有收集任何表单字段值
2. 直接对FormData执行JSON.stringify()无效，FormData是特殊的表单数据对象，不能直接转JSON
3. 复选框的命名不符合后端接收数组的要求（多选场景下需要带[]后缀）

下面给出两种可行的解决方案：

方案一：使用FormData直接提交（适合后端接收multipart/form-data格式） #

这种方式无需手动收集字段，浏览器会自动处理表单数据：

const handleSubmit = (event) => {
  event.preventDefault();
  // 直接用表单元素初始化FormData，自动收集所有字段
  const frmData = new FormData(event.target);
  const BaseURL = 'https://*****/createtaxform.php';
  
  fetch(BaseURL, {
    method: 'POST',
    body: frmData // 直接传递FormData，不要设置Content-Type，浏览器会自动添加正确的头
  })
  .then((response) => response.json())
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });
}

// 表单部分修改复选框name，添加[]后缀以支持多选数组
<Form onSubmit={handleSubmit}>
  {formsList.map((item, index) => (
    <div className="custom-control custom-control-alternative custom-checkbox mb-3" key={item.id}>
      <input 
        className="custom-control-input"
        id={item.id}
        // 给name加[]，让PHP识别为数组
        name={`${item.checkBoxfieldName}[]`}
        type="checkbox"
        value={item.id}
      />
      <label className="custom-control-label" htmlFor={item.id}>
        {item.form_title}
      </label>
    </div>
  ))}
  <Button type="submit">Update</Button>
</Form>

方案二：收集为JSON对象提交（适合后端接收application/json格式） #

如果后端要求接收JSON格式数据，需要手动收集选中的复选框值：

const handleSubmit = (event) => {
  event.preventDefault();
  const form = event.target;
  // 收集所有选中的复选框
  const checkedBoxes = form.querySelectorAll('input[type="checkbox"]:checked');
  const formDataObj = {};

  // 遍历选中项，按name分组存为数组
  checkedBoxes.forEach(box => {
    const fieldName = box.name;
    if (!formDataObj[fieldName]) {
      formDataObj[fieldName] = [];
    }
    formDataObj[fieldName].push(box.value);
  });

  const BaseURL = 'https://*****/createtaxform.php';
  
  fetch(BaseURL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formDataObj)
  })
  .then((response) => response.json())
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });
}

// 表单部分同样给name加[]后缀
<Form onSubmit={handleSubmit}>
  {formsList.map((item, index) => (
    <div className="custom-control custom-control-alternative custom-checkbox mb-3" key={item.id}>
      <input 
        className="custom-control-input"
        id={item.id}
        name={`${item.checkBoxfieldName}[]`}
        type="checkbox"
        value={item.id}
      />
      <label className="custom-control-label" htmlFor={item.id}>
        {item.form_title}
      </label>
    </div>
  ))}
  <Button type="submit">Update</Button>
</Form>

注意事项 #

• 后端PHP需要对应处理：如果用FormData提交，用$_POST['字段名']获取数组；如果用JSON提交，需要先通过file_get_contents('php://input')读取JSON字符串，再解码成数组
• 动态渲染的列表要加key属性（用item.id即可），符合React列表渲染规范

内容的提问来源于stack exchange，提问作者Muhammad Shafique Attari