React中向select添加option时出现空白选项问题求助

你遇到的空白选项是因为option标签写法错误：
你拼接HTML时写的是 <option value="x">x<option/>，这里的 <option/> 是额外的自闭合空选项，且原本的option没有用 </option> 正确闭合，导致每添加一个有效选项，就会多出来一个空白选项。另外，直接在React里用document.getElementById操作DOM也不符合React的状态管理逻辑，容易引发状态不一致问题。

方案1：修复DOM操作的标签错误（临时解决，不推荐） #

把拼接代码里的 <option/> 改成 </option>，同时给useEffect加上依赖数组，避免重复执行：

function Addsss(){
  useEffect(() => {
    const selectEl = document.getElementById('sel');
    // 先清空原有内容，防止重复添加
    selectEl.innerHTML = '<option disabled selected>Select a student</option>';
    unique.forEach(x => {
       selectEl.innerHTML += `<option value="${x}">${x}</option>`;    
    });
  }, [unique]); // 依赖unique数组，数组变化时才执行
}

方案2：React规范写法（推荐） #

React中应直接用JSX渲染选项，无需手动操作DOM，更符合React数据流逻辑：

// 确保picked的初始值为空字符串''
const sss = (
  <select id='sel' value={picked} onChange={x => setPicked(x.target.value)}>
    <option disabled value="">Select a student</option>
    {/* 直接映射unique数组生成选项 */}
    {unique.map((studentName) => (
      <option key={studentName} value={studentName}>
        {studentName}
      </option>
    ))}
  </select>
);

// 无需单独的Addsss函数，直接在组件中渲染sss即可

注意：

• 默认选项要设置value=""，和picked的初始值保持一致，避免出现状态不匹配
• map时要添加key，因为studentName是唯一值，直接用它作为key即可

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