我正在将react-hook-form
npm module用于我的编辑数据表单。下面是我的 API 响应示例:
{
UUID: "xxxxxx-bd10-473e-a765-xxxxxx"
address1: "addr1"
address2: "addr2"
address3: ""
city: "xxxxx"
contact: "uxxxxxb"
country: "xxxxxx"
email: "xxxxxx@email.com"
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>
</>
}
我需要显示在下拉列表中选择的公司名称的现有值。