React+Redux项目中如何获取select表单未触发onChange的默认选中值

问题根源 #

你使用的是受控select组件，初始selectedProject值为空字符串，但你渲染的所有<option>的value属性都没有匹配空字符串的选项，导致React的受控状态和实际DOM渲染的选中值脱节：浏览器会默认选中第一个option，但你的本地状态selectedProject仍然是空值，所以未触发onChange时提交就拿不到正确的默认值。

方案1：添加默认空选项（适合需要用户主动选择的场景） #

在渲染option的最前面加一个值为空的占位选项，保证初始状态和受控value匹配，也可以扩展必填校验逻辑：

<select
  name='projects'
  id='project-list'
  onChange={(e) => setSelectedProject(e.target.value)}
  value={selectedProject}
>
  {/* 新增默认占位选项 */}
  <option value="">请选择项目</option>
  {projects.map((project) => (
    <option key={project._id} value={project.title}>
      {project.title}
    </option>
  ))}
</select>

提交校验参考：

const handleNavigate = (e) => {
  e.preventDefault()
  if(!selectedProject) {
    alert('请先选择项目')
    return
  }
  navigate(`/project/${selectedProject}`)
}

方案2：默认选中第一个项目（适合允许直接提交默认值的场景） #

监听projects的加载状态，等接口返回项目列表后，自动把第一个项目的值设置为selectedProject的初始值：

// 原有拉取项目列表的副作用不变
useEffect(() => {
  dispatch(getProjects())
}, [dispatch])

// 新增监听projects的副作用，加载完成后自动选中第一个项目
useEffect(() => {
  if(projects?.length) {
    setSelectedProject(projects[0].title)
  }
}, [projects])

修改后selectedProject会和实际选中的option值实时同步，即使用户未触发onChange直接提交，也能拿到正确的默认选中值。

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