React JS Select切换选项后历史选中值全部存入数据库问题求解

问题根源 #

你的代码逻辑和单选下拉的需求不匹配：

• 状态idType1初始化为数组类型useState([])，本身设计为存储多个值，但你的下拉框是单选场景，不需要数组存储。
• 下拉框的onChange回调逻辑写的是setidType1([...idType1, e.target.value])，每次选择新选项时，都是把新值追加到原有数组末尾，而不是替换原有值，自然每次选择的记录都会被保留，最后全部存入数据库。

修复方案 #

针对单选下拉场景，按下面修改即可：

1. 把状态初始化改为字符串类型，初始值设为空：

const [idType1, setidType1] = useState('');

2. 修改onChange回调逻辑，每次选择直接替换状态值，不需要追加：

<select 
  className = "crear_escuela" 
  onChange = {(e) => setidType1(e.target.value)} 
  required
>
   <option value="" disabled selected hidden>Seleccione...</option>
   <option value = 'Academia Internacional de Boquete' label = 'Academia Internacional de Boquete' />
   <option value = 'Academia Internacional de David' label = 'Academia Internacional de David' />
</select>

修改完成后就只会存储最后一次选中的有效值。

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