react-hook-form使用reset回填表单时下拉框无法自动选中值问题求助

你遇到的下拉框无法回填选中值的问题有两个核心原因：

1. 下拉选项的遍历逻辑没有返回值，导致<option>元素根本没有渲染到页面上，react-hook-form 没法匹配到对应 value 的选项自然无法选中
2. useEffect 依赖项不全，只监听了reset，当服务端传递的props.locationDetails、props.companies更新后，不会重新触发回填逻辑，很可能执行 reset 时数据还没加载完成

修复方案 #

1. 修正下拉选项的遍历逻辑 #

原来的 map 用了大括号但没有写 return，要么补 return 关键字，要么改成隐式返回的写法：

<select {...register('company', { required: true })} className="form-control" >
  {props.companies?.map((company, index) => (
    <option key={index} value={company.UUID}>{company.name}</option>
  ))}
</select>

2. 补全useEffect的依赖项 #

把props.locationDetails和props.companies加到依赖数组里，保证数据加载完成后会重新执行回填：

useEffect(() => {
  // 增加判断：等公司列表也加载完成再执行回填
  if (props.locationDetails && props.companies?.length) {
    reset(props.locationDetails);
  }
}, [reset, props.locationDetails, props.companies])

可选兜底方案 #

如果修复后还是有偶现的回填失败，可以在 reset 之后主动调用setValue给 company 字段赋值：

useEffect(() => {
  if (props.locationDetails && props.companies?.length) {
    reset(props.locationDetails);
    // 主动赋值兜底
    setValue('company', props.locationDetails.company, { shouldValidate: true });
  }
}, [reset, setValue, props.locationDetails, props.companies])

额外提示：你getServerSideProps里的错误分支有重复写locationDetails的笔误，可以顺手修正避免后续出问题。

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