在 <select /> 中显示未定义的 react-hook-form

Question

我刚开始尝试 react-hook-form，但我无法从 . 有谁知道为什么 console.log(watch('example')) 函数显示 undefined 当我 select一个选项

/src/components/Select.js

import React from 'react'

const Select = ({ options, name, ...rest }) => {
   return (
        <div className="mt-4">
            <select {...rest} className="py-2 px-4 w-full dark:bg-theme-dark-gray rounded-sm">
                <option name={name} disabled selected>Select {name}</option>
                {options}
            </select>
        </div>
    )
}

export default Select

/app.js

const App = () => {

    // **
    // **
    // blablablablabla...
    // **
    // **

    console.log(watch('Category'));
    
    return (
        <Select
            {...register('Category', {required: true})}
            name="category"
            options= {
                categoryList.map(category => {
                    return (
                        <option key={category.id}>{category.category}</option>
                    )
                })
            }
        />
        {
            errors.category &&
            <Error 
                message='category is required'
            />
        }
    )

    // **
    // **
    // blablablablabla...
    // **
    // **

Answer 1

您应该为 option 标签添加值

<option key={category.id} value={category.category}>{category.category}</option>

option 标签没有 name 属性

在 <select /> 中显示未定义的 react-hook-form

react-hook-form showing undefined in <select />

javascript

reactjs

react-hooks

react-hook-form