react-hook-form 使用重置选择下拉值答案

【问题标题】：reack-hook-form selected dropdown value using resetreact-hook-form 使用重置选择下拉值
【发布时间】：2021-12-11 04:32:18
【问题描述】：

我正在以更新位置的形式更新详细信息。我需要在表单字段中显示现有值。

下面是更新组件的代码：

import axios from 'axios'
import { useState, useEffect } from 'react'
import { useForm } from 'react-hook-form'

export default function Edit({...props}) {
  const {
    register,
    handleSubmit,
    setValue,
    reset,
    formState: { errors },
  } = useForm({mode: 'onBlur' });

   useEffect(() => {
    
    if (props.locationDetails) {
        console.log(props.locationDetails) 
        // in this console I can get { 'name' : 'name value',  'company' : 'UUID'}
        reset( props.locationDetails);
    }
   }, [reset])

   const editLocation = async(data) => {
       .....
   }

   return (
     <form className="g-3" onSubmit={handleSubmit(editLocation)} data-testid="editLocationForm">

        <input type="text" {...register('name', { required: true })} className="form-control"  placeholder="Enter Name Here" />
                                                    {errors.name && <p className="error" role="error" >Name is required.</p>}

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

}



   export async function getServerSideProps({ params }) {

    if(params.id) {
        let locationId = params.id

        let locationResponse = await axios(process.env.BASE_URL + '/locations/' + locationId,{
            headers : {
                'Content-Type': 'application/json',
                'Authorization' : 'Bearer ' + process.env.TOKEN
            }
        })

        let companiesResponse = await axios(process.env.BASE_URL + '/companies',{
            headers : {
                'Content-Type': 'application/json',
                'Authorization' : 'Bearer ' + process.env.TOKEN
            }
        })

        if(locationResponse.status == 200 && locationResponse.data && companiesResponse.status == 200) {
            
            let locationDetails = await locationResponse.data

            let companies = await companiesResponse.data.results

            locationDetails.company = locationDetails.links.Company

            return {
                props : {
                    locationDetails: locationDetails,
                    companies: companies
                }
            }
        } else {
            return {
                props : {
                    locationDetails: {},
                    locationDetails:{}
                }
            }
        }    
    } else {
        return {
            props : {
                locationDetails: {},
                locationDetails:{}
            }
        }

    }
}

在这里，我可以在其输入文本字段中设置所有现有的位置值，但无法显示选定的下拉菜单。

响应结构如下：

{
   "name": "New York",
   "country": "USA",
   "company": "UUID"   <<<< this is the uuid which needs to be selected on select dropdown.
}

【问题讨论】：

抱歉“注册”道具的结构如何？为什么有“数据-”属性？（注意通常html元素上的属性被转换为他们的javascript api实现而不是kebab-case html属性）
props 的结构是最后一个 json 代码 sn-p 。 data-* 用于测试目的。你可以忽略它们
注册（'公司'，{必需：真}）？这是一个函数而不是普通对象，对吧？
我需要在下拉列表中显示选定的值，但 id 嵌套在 props 对象中
注册（'公司'，{必需：真}）？用于反应表单钩子

标签： reactjs react-hooks next.js react-hook-form

【解决方案1】：

对于嵌套字段，在属性之间添加点：

<select {...register("links.company", { required: true })}>
  {(companies || []).map((company, index) => (
    <option key={index} value={company.UUID}>
      {company.name}
    </option>
  ))}
</select>

【讨论】：

这里可以看到他在使用=>() required 返回jsx进行渲染
@MatteoBombelli 你是在和我说话还是在和 OP 说话？
它没有显示下拉列表中选择的现有值
@DeepKakkar 抱歉，我在回答其他问题。很高兴你终于解决了。

【解决方案2】：

和之前写的一样，你需要返回一些 jsx

<select onChange={onChange}>
  {(companies || []).map((companyData, index) => (
    <option key={index} value={companyData.links.UUID}>
      {company.name}
    </option>
  ))}
</select>

这将返回嵌套值。

如果你需要通过 react 来管理状态


const [selectedData, setSelectedData] = useState("");

const onChange = useCallback((event)=>{
   const valueReturned = evant.target.value;
   setSelectedData(valueReturned)
   ... do what you need
}, [... put here dependencies])

...

<select onChange={onChange} value={selectedData}>
  {(companies || []).map((companyData, index) => (
    <option key={index} value={companyData.links.UUID}>
      {company.name}
    </option>
  ))}
</select>

这里是一个将状态作为受控组件进行管理的回调示例

https://reactjs.org/docs/forms.html#controlled-components

如果你愿意，你也可以使用不受控制的组件

https://reactjs.org/docs/uncontrolled-components.html

【讨论】：

先生，我必须在下拉列表中显示选定的值。形式为 react-hook-form npmjs.com/package/react-hook-form
我在getServerSideProps函数中使用locationDetails.company = locationDetails.links.Company解决了自己的嵌套问题
现在我只想显示下拉列表中选择的现有值
在原生选择上，被选元素已经被选中，是指请求发送后吗？
我已经解决了。我会尽快写下答案。嗯...感谢您的帮助

【解决方案3】：

为了消除嵌套问题，我将serversideprops中的响应修改为

locationDetails.company = locationDetails.links.Company

我之前也更新了这个问题。

这是我用来显示已选择的现有选项的代码。

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

selected={company.UUID === register.company} 是条件。

【讨论】：