表单提交异常：所有<Select>字段值在HTTP请求中返回undefined

核心原因很明确：你用的是Material-UI的<Select>自定义组件，它靠React状态管理值，原生HTML表单提交时只会自动收集原生表单控件（比如input、原生select）的值，不会读取React状态里的内容，所以才会出现手动输入字段正常、Select字段返回undefined的情况。

给你两个直接能用的解决方案：

方案一：手动接管表单提交（推荐，更灵活） #

直接阻止原生表单提交，自己构造请求数据，把React状态里的Select值一起传过去：

1. 给表单添加onSubmit事件：

<form onSubmit={handleSubmit}>
  {/* 原表单内容不变 */}
</form>

2. 编写提交处理函数，把所有需要的字段（包括Select对应的状态）塞进FormData：

const handleSubmit = (e) => {
  e.preventDefault(); // 阻止原生提交行为
  const formData = new FormData();

  // 单值Select：直接传状态值
  formData.append('cardType', cardType);
  // 多选Select：转成后端能识别的格式，比如逗号分隔字符串
  formData.append('symbols', cardSymbols.join(','));
  formData.append('keywords', cardKeywords.join(','));

  // 手动输入字段可以直接从表单元素获取，比如：
  // formData.append('cardName', e.target.elements.cardName.value);

  // 发送请求到后端
  fetch('/api/cardAdd', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .catch(err => console.error('提交失败:', err));
};

方案二：用隐藏原生input同步状态（适配原生表单提交） #

如果想保留原生表单的提交逻辑，可以给每个Select加一个隐藏的原生input，让它的value同步React状态，这样原生表单提交时就会带上这些值：

{/* 原MUI Select组件不变 */}
<Select
  labelId="demo-simple-select-standard-label"
  id="demo-simple-select-standard"
  value={cardType}
  onChange={handleCardTypeChange}
  label="Card Type"
>
  {/* 选项内容 */}
</Select>
{/* 新增隐藏input，name对应后端接收的字段名，value同步state */}
<input type="hidden" name="cardType" value={cardType} />

{/* 多选Select的处理 */}
<Select
  multiple
  value={cardSymbols}
  onChange={handleSymbolChange}
  {/* 其他属性 */}
>
  {/* 多选选项 */}
</Select>
<input type="hidden" name="symbols" value={cardSymbols.join(',')} />

额外注意点 #

• 一定要保证你提交的字段名和后端接口要求的完全一致，比如你说后端用symbols，那就要把append的name或者隐藏input的name设为symbols，而不是cardSymbols
• 如果后端支持直接接收数组，多选字段可以循环append同一个name（比如formData.append('symbols[]', item)），具体格式要看后端框架的要求

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