React项目中Chakra UI Select组件占位符显示异常问题

1. 组件未受控，状态不同步：当前的Select组件没有绑定value属性，属于非受控组件。Chakra UI的Select内部会维护独立的选中状态，而你通过onChange更新的是React的bet_size状态，两者没有关联。首次选择时组件内部状态更新显示选中项，但切换选项时，React状态更新了，但组件不知道要匹配哪个值，所以回到占位符；第二次选择同一选项时，组件内部状态才再次同步，显示选中项。
2. 类型转换逻辑错误：如果BetSizes的枚举值是字符串格式（比如"0.1"），你用parseInt转换会得到0，和初始状态的0完全一致，这会导致状态更新无效——即使日志显示event.target.value正确，转换后的bet_size没有变化，进一步加剧状态不同步的问题。

步骤1：将Select改为受控组件 #

给Select添加value属性，绑定到bet_size状态，确保组件状态和React状态完全同步：

<Select 
    placeholder='Bet Size'
    onChange={handleWhichBetSize}
    value={bet_size}
>
    <option value={BetSizes.Solana01}>0.1 SOL</option>
    <option value={BetSizes.Solana05}>0.5 SOL</option>
    <option value={BetSizes.Solana1}>1.0 SOL</option>
</Select>

步骤2：修正类型转换逻辑 #

根据BetSizes的实际值类型调整转换方式：

// 若BetSizes值为字符串（如"0.1"），用parseFloat保留精度
const [bet_size, setBetSize] = useState<number>(0);
const handleWhichBetSize = (event : React.ChangeEvent<HTMLSelectElement>) => {
    console.log("event: ", event.target.value);
    setBetSize(parseFloat(event.target.value));
};

// 或直接将状态设为字符串类型，和option value完全匹配
const [bet_size, setBetSize] = useState<string>("");
const handleWhichBetSize = (event : React.ChangeEvent<HTMLSelectElement>) => {
    console.log("event: ", event.target.value);
    setBetSize(event.target.value);
};

额外注意：枚举值一致性 #

确保BetSizes的枚举值和option的value完全对应，示例枚举定义：

enum BetSizes {
    Solana01 = "0.1",
    Solana05 = "0.5",
    Solana1 = "1.0"
}

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