React JS编辑表单中如何在select下拉框显示已选中选项

你目前的写法不符合react-hook-form（以下简称RHF）的受控表单逻辑，问题出在三个地方：

• 你把defaultValue写在了单个option上，这个属性应该作用于select标签，单独给option加不会生效
• RHF接管了所有表单值的状态管理，不需要额外声明selectedCompany state维护选中值
• useEffect没有加依赖数组，会无限重复执行

修正后的核心代码 #

import axios from 'axios'  
import { useForm } from 'react-hook-form'
import { useState, useEffect } from 'react' // 别忘了引入用到的hook

// 获取所有公司的默认列表
Edit.getInitialProps = async (context) => {
  try {
    const companyResponse = await axios(process.env.BASE_URL + '/v1/companies',{
        headers : {
            'Content-Type': 'application/json',
            'Authorization' : 'Bearer ' + process.env.TOKEN
        }
    })
    if(companyResponse.status == 200) {
        return {
            companies : companyResponse.data.results
        }
    } else {
        return {companies: []}
    }
} catch (error) {
    return {companies: []}
}
}

export default function Edit({locationDetails, ...props}) { // 确保locationDetails是当前编辑数据的props
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({mode: 'onBlur' });

  useEffect(() => {
    // 拿到编辑数据后，直接给RHF表单赋所有初始值
    reset({
      // 其他表单字段的初始值也可以一起在这里赋值
      company: locationDetails.links.Company
    })
  }, [locationDetails, reset]) // 加依赖数组，只在编辑数据更新时执行一次

  return (
    <>
      <form className="g-3" onSubmit={handleSubmit(editLocation)} data-testid="editLocationForm">
         <select 
           {...register('company', { required: true })} 
           className="form-control"
         >
           {(props.companies || []).map((company) => (
            // 用company.UUID做key比index更稳定，不需要手动设置selected属性
            <option key={company.UUID} value={company.UUID}>{company.name}</option>
           ))}
         </select>
        .....
      </form>
    </>
  )
}

实现原理 #

RHF的受控模式下会自动同步表单字段值，你只要通过reset方法把关联的公司UUID赋值给company字段，RHF会自动匹配下拉框中对应value的option为选中状态，不需要手动处理选中逻辑。

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