在带有Reacti-钩子形式的“选择菜单”中设置默认值

Question

我正在尝试在表单中设置来自脉轮-反应-选择的select菜单的默认值，但是我没有成功地实现这一点。

这是代码：

<form onSubmit={handleSubmit(onSubmit)}>
                    <Flex justifyContent="space-between" mt={8}>
                        <Flex flexDir={"column"} justifyContent={"space-between"} align={"flex-start"}>
                            <Heading size={"sm"}>Prefix</Heading>
                            <Text color={"gray.300"}>Configure the prefix for the guild.</Text>
                            <Input
                                paddingTop={"1px"}
                                placeholder="Enter prefix here"
                                size='md'
                                {...register("prefix", { maxLength: { value: 5, message: "Max length exceeded" }, minLength: { value: 1, message: "Minimum length is 1" }, required: { value: true, message: "This field is required." } })}
                            />
                        </Flex>
                        <Flex flexDir={"column"} justifyContent={"space-between"} align={"flex-end"}>
                            <Heading size={"sm"}>Language</Heading>
                            <Text color={"gray.300"}>Configure the language for the guild.</Text>
                            <Controller
                                name="language"
                                control={control}
                                defaultValue=" English"
                                rules={selectMenuRules.language}
                                render={({ field }) => (
                                    <Select className='select-menu' options={availableLanguages} {...field} />
                                )}
                            />
                        </Flex>
                    </Flex>
                    <br />
                </form>

Answer 1

使用字符串英语作为defaultValue似乎是问题所在。您可以尝试使用类似于availableLanguages[0].value的defaultValue道具。

编辑：

您可以尝试只使用availableLanguages[0]。另外，React高级用法部分也有一些组件的示例。这些可能会有帮助。

https://react-hook-form.com/advanced-usage