如何在React JS编辑表单的选择下拉列表中显示所选选项

Question

我的编辑数据表单使用react-hook-formnpm模块。下面是我的API响应示例：

{
UUID: "xxxxxx-bd10-473e-a765-xxxxxx"
address1: "addr1"
address2: "addr2"
address3: ""
city: "xxxxx"
contact: "uxxxxxb"
country: "xxxxxx"
email: "[e-mail]"
links: {Company: 'xxxxxx-4689-4689-8812-xxxxxxxxx'}
name: "xxxxx"
phone: "xxxxxxxx"
state: "xxxxxxxx"
zip: "11111"
}

以下是编辑组件所需的代码行

import axios from 'axios'  
import { useForm } from 'react-hook-form'
// Now getting the default list of all the companies
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({...props}) {
const [selectedCompany, setSelectedCompany] = useState(0)
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm({mode: 'onBlur' });

useEffect(() => {
// Here I am getting location existing value from API response i.e. the above json response
setSelectedCompany(locationDetails.links.Company)  // setting state of existing company of location
})
return (
<>
<form className="g-3" onSubmit={handleSubmit(editLocation)} data-testid="editLocationForm">
<select {...register('company', { required: true })} className="form-control">
{(props.companies || []).map((company, index) => (
<option key={index} value={company.UUID} defaultValue={company.UUID === selectedCompany}>{company.name}</option>
))}
</select>

.....
</form>
</>
}

我需要显示在下拉列表中选择的公司名称的现有值。

Answer 1

从react-hook-form文档中，您必须使用钩子的setValue或reset方法，setValue仅设置您指定的字段的值，而reset将重置整个表单并设置您指定的初始值

https://react-hook-form.com/api/useform/setvalue

https://react-hook-form.com/api/useform/reset

设定值方法

useEffect(() => {
// Here I am getting location existing value from API response i.e. the above json response
setSelectedCompany(locationDetails.links.Company)  // setting state of existing company of location
setValue('company', locationDetails.links.Company);
})

重置方法

useEffect(() => {
// Here I am getting location existing value from API response i.e. the above json response
setSelectedCompany(locationDetails.links.Company)  // setting state of existing company of location
reset('company', locationDetails.links.Company);
})