React中select/option下拉框未正确传递选中值问题排查

你的代码存在4处直接导致取值异常的问题：

• 事件绑定位置错误：将onChange事件绑定在了<option>元素上，React中下拉选择的变更事件必须绑定在<select>根标签上，绑定在option上既无法稳定触发事件，也会导致取值上下文错乱拿到完整对象
• 缺少选中值的独立存储状态：没有定义单独的state保存用户当前选中的下拉值，提交逻辑里直接把去重后的全量sampleTypes数组作为参数传给接口，自然无法拿到用户单次选择的具体值
• 受控属性缺失：<select>标签没有绑定value属性，不属于React标准的受控组件，无法同步内部选中状态
• 基础语法/未定义变量问题：newCapabilities对象属性间漏写逗号，代码中直接使用了未定义的status、onChange、response、closeModal变量，会直接触发运行时报错；useEffect依赖数组缺失profile，会导致props更新时内部逻辑不执行。

1. 新增独立的selectedSampleType状态存储用户选中的下拉值
2. 将onChange事件移到<select>标签上，选择变更时更新选中状态
3. 给<select>绑定value属性，完成受控组件绑定
4. 修复所有语法错误、未定义变量问题，提交接口时传入选中的单个值而非全量数组
5. 移除option上重复的固定id属性，避免HTML规范错误

import { useState, useEffect } from 'react';

export default function AddCapabilitiesModal({ profile, onClose }) {
  const [error, setError] = useState(null)
  const [loading, setLoading] = useState(false)
  const [sampleTypes, setSampleTypes] = useState([])
  // 存储下拉框当前选中值
  const [selectedSampleType, setSelectedSampleType] = useState('')
  const [form, setForm] = useState(null)

  useEffect(() => {
    if (!profile) return
    setForm({...profile})
    // 提取并去重样本类型
    const sampleTypeList = profile.map(item => item.sampleType)
    const uniqueSampleTypes = sampleTypeList.filter(
      (type, idx) => sampleTypeList.indexOf(type) === idx
    )
    setSampleTypes(uniqueSampleTypes)
    // 默认选中第一个选项
    if (uniqueSampleTypes.length) setSelectedSampleType(uniqueSampleTypes[0])
    setLoading(false)
  }, [profile]) // 补全useEffect依赖

  const handleSubmit = () => {
    if (!selectedSampleType) {
      setError(true)
      return
    }
    setError(false)
    setLoading(true)
    const tableName = 'crf2e_lrn_capability_statuses'
    const requestBody = {
      crf2e_sample_type_id: selectedSampleType // 传入选中的单个值
    }
    addCapabilities(tableName, requestBody)
  }

  const addCapabilities = async (tableName, body) => {
    const { xhr } = await window.lrn.createItem(tableName, body)
    const newUuid = xhr.getResponseHeader('entityid')
    const newItem = {
      sampleType: selectedSampleType, // 补全逗号语法错误
      uuid: newUuid
    }
    // 替换为你实际的业务回调逻辑
    console.log('新增成功', newItem)
    setLoading(false)
    onClose() // 调用父组件传入的关闭方法
  }

  return (
    <form>
      <div className='column flex'>
        <div className='lrow filter-options group'>
          <select 
            className='add-cap-select'
            value={selectedSampleType}
            onChange={(e) => setSelectedSampleType(e.target.value)}
          >
            {sampleTypes.map((sampleType) => (
              <option
                key={sampleType}
                value={sampleType}
              >
                {sampleType}
              </option>
            ))}
          </select>
          <button 
            type="button"
            disabled={loading}
            onClick={handleSubmit}
          >
            {loading ? '提交中' : '确认'}
          </button>
          {error && <span className="err">请选择样本类型</span>}
        </div>
      </div>
    </form>
  )
}

• React的表单元素默认采用受控组件模式，所有输入类元素（input/select/textarea）都需要绑定对应的value状态和onChange变更事件，不要将事件绑定在内部子元素上
• 不要直接将源数据数组作为提交参数，用户选择的单个值必须单独存储
• 循环渲染的元素不要写固定id，会导致页面id重复，key属性已经能满足React的diff需求

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