React组件无法将选中值存入数据库，需如何修改代码？

你的代码存在3个核心问题，导致选中值无法被正确捕获和存储，具体修改如下：

1. 修正状态初始值 #

如果是单选语言场景，selectedOption的初始值应该设为空字符串而非数组（数组多用于多选场景）：

const [selectedOption, setSelectedOption] = useState('');

2. 修复handleChangeOption函数 #

该函数需要接收选择器返回的选中值，并调用setSelectedOption更新状态：

const handleChangeOption = (selectedValue) => {
    setSelectedOption(selectedValue);
}

3. 修正onChange绑定方式 #

你当前写法onChange={handleChangeOption()}会在组件渲染时直接执行函数，正确做法是传递函数引用（不带括号），同时加上value属性实现选择器与状态的双向绑定：

<Select className={`col-12 o-languages`}
    onChange={handleChangeOption}
    options={options}
    value={selectedOption}
/>

完整修改后的代码 #

export default function ChonLanguage() {
    const [selectedOption, setSelectedOption] = useState('');
    const options = [
        { value: 'Vietnamese', label: 'Vietnamese' },
        { value: 'English', label: 'English' },
        { value: 'Chinese', label: 'Chinese' },
        { value: 'Japanese', label: 'Japanese' },
        { value: 'German', label: 'German' },
    ];
    
    const handleChangeOption = (selectedValue) => {
        setSelectedOption(selectedValue);
    }
   
    return (
        <Select className={`col-12 o-languages`}
            onChange={handleChangeOption}
            options={options}
            value={selectedOption}
        />
    )
}

修改完成后，选中的语言值会被正确存入selectedOption状态，后续提交时直接使用该状态值即可写入数据库。

内容的提问来源于stack exchange，提问作者Lê Trung Hiếu