更新表单中react-select默认值设置失败、onSubmit不触发问题

问题1：默认选中项无法生效 #

根本原因

• 组件首次渲染时，airlineOptions的初始值为undefined，航空公司列表是接口异步拉取的，此时执行find匹配默认值的结果为undefined。状态opt的初始化仅在组件首次渲染时执行一次，后续接口返回airlineOptions更新后，opt不会自动重新计算，传入defaultValue的值始终为空。
• Select组件上重复声明了两次defaultValue属性，属于冗余代码。
• 编辑场景下使用defaultValue是非受控模式，状态同步不稳定，匹配逻辑执行时机不对就会出现选中失效。

修复方法

• 将airlineOptions初始值设为空数组，避免可选链运算的异常。
• 改为受控模式绑定：用value属性替代defaultValue，和onChange配合同步选中状态，选中状态直接存储react-select要求的{label, value}格式对象，不要单独存value。
• 等航空公司选项列表格式化完成后，再匹配当前航班对应的选项，设置为初始选中值。

对应代码片段：

// 状态定义调整
const [airlineOptions, setAirlineOptions] = useState([])
// 直接存选中的选项对象，初始值给null
const [airline, setAirline] = useState(null)

const getAirlines = async() => {
  const response = await fetch(`/backend/airlines`)
  const data = await response.json()
  const formattedOptions = data.map((airline) => ({
    value: airline.id,
    label: airline.name
  }))
  setAirlineOptions(formattedOptions)
  // 数据加载完成后匹配默认选项
  const matchedAirline = formattedOptions.find(({ label }) => label === flight?.airline)
  if (matchedAirline) setAirline(matchedAirline)
}

Select组件属性调整：

<Select 
  required 
  id='airline'
  isClearable={true}
  options={airlineOptions}
  isSearchable={true}
  value={airline}
  onChange={(selectedOption) => {
    // 直接同步选中的整个对象，清空选择时selectedOption为null，可正常同步
    setAirline(selectedOption)
  }}
/>

手动传入固定{label, value}对象能生效，是因为传入的值在组件首次渲染时就存在，不存在异步加载导致的取值为空问题。

问题2：Select组件绑定的onSubmit事件不触发 #

根本原因

• react-select的Select是自定义封装组件，原生不支持onSubmit属性，它不是原生表单元素，传入的onSubmit属性会被组件内部忽略，不会绑定到任何DOM节点上，自然无法触发。

修复方法

• 表单提交逻辑统一绑定在外层<form>标签的onSubmit事件上即可，当前写的表单绑定提交逻辑是正确的，不需要给Select单独添加onSubmit属性。
• 如果需要实现「选中选项后自动提交表单」的效果，直接在Select的onChange回调中触发表单提交即可：

onChange={(selectedOption) => {
  setAirline(selectedOption)
  // 自动提交逻辑按需开启
  // document.getElementById('app_form').requestSubmit()
}}

注意提交时取航空公司字段值，直接从airline状态里拿value（对应航空公司id）和label（对应航空公司名称）即可，不需要再单独维护其他存储字段。

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