如何使用react-hook-form从后端数据中预填充选择标签选项？

问题描述

您如何使用react-hook-form将来自后端的数据预填充到select标签中。使用文本输入字段非常简单，但不适用于select标签。

function App(){

   const [dataFromDB,setDataFromDB] = useState(null);

    useEffec(()=>{
       /* fetchdata here */
    },[]);
    
    return (
        <FormContainer preloadedValues={dataFromDB} />
    )

}

这是一个简单的表单，具有2个输入和一个提交按钮，该表单有效：

import {useForm} from "react-hook-form";   

function FormContainer ({preloadedValues}){
    const {register,handleSubmit,errors} = useForm({
        defaultValues: preloadedValues
    });

    const processData = (data)=>{
       // logic to send data back to backend
    }

    <form onSubmit={handleSubmit(processData)}>
        <input name='firstname' ref={register} />
        <input name='lastname' ref={register} />
        <button type='submit'>Submit</button>
    </form>
}

这是带有select标签的，我在这里感到困惑：

const {register,errors} = useForm({
    defaultValues: preloadedValues
});

const processData = (data)=>{
   // logic to send data back to backend
}

<form onSubmit={handleSubmit(processData)}>
    <select
        name='selectdata'
        ref={register}
    >
     {
        /* do i have to map data here? */
     }
    </select> 
    <button type='submit'>Submit</button>
</form>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）