使用Select Box提交Mongoose数据时gender字段必填错误求助

根据你提供的错误信息和代码，问题出在Select Box的初始值处理和表单验证逻辑上，导致提交时gender字段为空，触发了Mongoose的必填验证错误。

核心问题 #

1. React属性错误：你的<select>标签使用了原生HTML的class属性，在React中应该使用className，否则类名不会被正确解析，可能影响表单的原生验证行为。
2. 默认选项无value：默认的占位选项没有设置value，且你的gender状态初始值可能为空/undefined，导致用户未选择性别时，提交的gender字段不符合Mongoose的必填要求。
3. 原生验证失效：虽然加了required属性，但由于默认选项是disabled，浏览器的原生表单验证可能不会拦截空值提交。

具体修复步骤 #

1. 修正React的class属性并完善默认选项

将<select>的class改为className，同时给默认占位选项添加value=""：

<div className='form-group col'>
 <select
    className="form-select form-select-sm" <!-- 替换class为className -->
    value={gender}
    onChange={(e) => setGender(e.target.value)}
    required>
      <option value="" disabled selected aria-hidden>--Select Gender--</option> <!-- 添加value="" -->
      <option value="Male">Male</option>
      <option value="Female">Female</option>
  </select>
 </div>

2. 确保gender状态的初始值正确

在组件中初始化gender状态为空字符串，和默认选项的value对应：

const [gender, setGender] = useState('');

3. 添加手动验证（可选但推荐）

在提交函数中手动检查gender是否有效，避免空值提交：

const saveUser = async (e) => {
  e.preventDefault();
  
  // 手动验证性别是否选择
  if (!gender) {
    alert('请选择性别');
    return;
  }
  
  try {
    await axios.post("http://localhost:4000/user", {
      name,
      email,
      gender
    });
    navigate("/lists")
  } catch (error) {
    console.log(error);
  }
}

验证修复效果 #

修改后，当用户未选择性别就提交表单时：

• 浏览器的原生required验证会触发（因为select的value为空）
• 即使原生验证失效，手动添加的检查也会拦截提交
• 提交的gender字段会是有效的Male或Female，通过Mongoose的必填验证

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