如何实现稳定的Select组件？解决选中值丢失及多次点击生效问题

核心问题有两个： #

• Select组件未绑定value，处于未受控状态
  你只在onChange里更新了state，但没把difficulty绑定到Select的value属性。React无法跟踪选中值，当点击其他表单字段触发组件重新渲染时，Select会回到占位符状态。

• option的key使用了动态生成的uuidv4()
  每次组件渲染时，uuidv4()都会生成新的随机值，React会认为这些option是全新的元素，会重新创建它们。这会导致Select的选中状态丢失，需要多次点击才能让组件正确识别选中项。

修复后的代码： #

import { EnumDifficulty } from "@/components/Utils/EnumDifficulty";
import { useState } from 'react';

const [difficulty, setDifficulty] = useState(''); // 初始化空字符串，匹配未选中状态

// ...

return (
  <FormControl isRequired>
    <FormLabel>Niveau</FormLabel>
    {/* 绑定value到difficulty，转为受控组件 */}
    <Select 
      placeholder='Sélectionner le niveau' 
      onChange={(e) => setDifficulty(e.target.value)}
      value={difficulty}
    >
      {/* 用数组元素本身作为key，元素唯一无需动态生成 */}
      {EnumDifficulty.map(diff => (
        <option key={diff} value={diff}>{diff}</option>
      ))}
    </Select>
  </FormControl>
);

补充说明：

• 给option显式添加value属性，规范组件传值逻辑，避免潜在匹配问题
• 初始化state为''，和Select未选中时的状态对齐，确保初始渲染和占位符表现一致

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