React 级联受控Select组件选项更新时状态值与可选列表不匹配的检测问题

修复方案 #

直接在Select组件内新增副作用监听可选列表和当前值的变化，主动做合法性校验并同步状态即可，不需要依赖原生change事件触发。

实现代码 #

在现有Select组件中新增如下useEffect逻辑：

useEffect(() => {
  // 多选场景校验
  if(to.multiple) {
    const validValues = Array.isArray(value) ? value.filter(val => 
      to.options.some(option => option[valueProp] === val)
    ) : []
    if(JSON.stringify(validValues) !== JSON.stringify(value)) {
      valueChanged(validValues, true)
    }
    return
  }
  // 单选场景校验
  const valueValid = to.options.some(option => option[valueProp] === value)
  if(!valueValid && value !== "") {
    valueChanged("", false)
  }
}, [to.options, value, valueProp, to.multiple, valueChanged])

说明 #

1. 原生select受控模式下，若传入的value不在可选option列表内，浏览器会默认渲染空选项，但该行为不会触发onChange事件，属于原生DOM和React的既定行为
2. 新增的监听逻辑覆盖所有to.options变更场景，不管是dal请求拉取更新还是上层调用setTemplateOptions更新，都能主动检测到非法值并同步状态
3. 原有dal请求useEffect内写的旧检测逻辑可以直接删除，新的通用逻辑已经覆盖该场景

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