Shadcn Select 不会在 form.reset() 调用上重置（react-hook-form）

Question

我在 FormField 组件内使用 Shadcn UI Select 组件（因此使用 zod 进行验证，使用 React-hook-form 来管理表单状态）。

表单组件在提交时重置，如下所示：

useEffect(() => {
    form.reset(defaultValues);
    // (...)
}, [form.formState.submitCount])

这会导致表单值（保存在 formState 中）重置（因此默认值会在下次提交时提交），但“选择”字段仍显示先前选择的项目。 这是 FormField 组件（它们是动态生成的）：

<FormField
   control={form.control}
   key={position}
   name={position}
   render={({ field }) => (
      <FormItem className="my-5">
         <FormLabel>{position} place</FormLabel>
            <Select onValueChange={(value) => onSelectDancer(field, value)}>
               <FormControl>
                  <SelectTrigger>
                     <SelectValue
                        placeholder="Please select a dancer / couple"
                        {...field}
                     />
                  </SelectTrigger>
               </FormControl>
            <SelectContent>
               {dancers
                  .filter(dancer => (!Object.values(selectedDancers).includes(dancer.id.toString()) || selectedDancers[position] === dancer.id.toString()))
                  .map(dancer => (
                     <SelectItem
                        key={dancer.id.toString()}
                        value={dancer.id.toString()}
                     >{Object.values(dancer).join(', ')}</SelectItem>
                ))}
                <SelectItem key='blank' value='none'>None</SelectItem>
              </SelectContent>
           </Select>
        </FormItem>
     )}
/>

这是 onValueChange 处理程序：

function onSelectDancer(field: any, dancerId: string) {
    field.onChange(dancerId);
    setSelectedDancers({...selectedDancers, [field.name]: dancerId})
}

我什至设法找到了保存显示项目值的嵌套组件（SelectProvdier - 如 ReactDevTools 的屏幕截图所示），但我不知道如何清除它......

这是整个表单组件：https://github.com/emdoem/hatful-of-pears/blob/master/components/ScoreInput.tsx

Answer 1

我正在使用无线电输入标签，但我相信它也可以在选择中工作

您需要做的就是验证field.value

示例：

return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
        <FormField
            control={form.control}
            name="addressType"
            render={({ field }) => (
              <FormItem className="space-y-3 input">
                <FormLabel>Are you adult?</FormLabel>
                <FormControl>
                  <RadioGroup
                    onValueChange={field.onChange}
                    defaultValue={field.value}
                    className="flex flex-col space-y-1"
                  >
                    <FormItem className="flex items-center space-x-3 space-y-0">
                      <FormControl>
                        <RadioGroupItem value="Yes" checked={field.value === 'Yes'} />
                      </FormControl>
                      <FormLabel>Yes</FormLabel>
                    </FormItem>
                    <FormItem className="flex items-center space-x-3 space-y-0">
                      <FormControl>
                        <RadioGroupItem value="No" checked={field.value === 'No'} />
                      </FormControl>
                      <FormLabel>No</FormLabel>
                    </FormItem>
                  </RadioGroup>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )

我正在验证 field.value === RadioGroupItem 值是否

您可以对这些 RadioGroupItem 使用打字稿

enum

或 javascript

object

价值观