当 api 提供值时，react-hook-form 的 useFieldArray 不渲染

Question

我正在使用 fieldArray 来使用 React-hook-form 构建表单。此表单用于创建和更新用户，我还使用react-hook-form 中的“values”属性。使用 fieldArray api 的字段有 2 个简单的时间输入，并且有一个“添加”按钮，您可以单击该按钮来呈现更多时间输入（它开始为空）。

表单默认
添加字段

问题是，当我在此表单之前获取数据并且它有任何breakTime（数组字段名称）时，它不会立即在用户界面中呈现。但是，当我单击添加时，它会呈现从 api 获取的所有字段。 （见下图）

除数组字段外所有字段均已填充

点击数组字段的添加按钮后

我的代码如下：

const form = useForm<OperatorOrManageData>({
    resolver: zodResolver(operatorOrManagerSchema),
    defaultValues: initializeDefaultValues(),
    mode: "all",
    values: data,
})

const { fields, append, remove } = useFieldArray({
    name: "breakTime",
    control: form.control,
})

    {fields.map((field, index) => (
                                    <div className="flex w-full flex-row items-center gap-3" key={field.id}>
                                        <div className="w-56 flex-row items-start whitespace-nowrap rounded-full bg-primaryBlue-100 px-4 py-2">
                                            <span>Horário de intervalo</span>
                                        </div>
                                        <FormField
                                            control={form.control}
                                            name={`breakTime.${index}.start` as const}
                                            render={({ field }) => (
                                                <FormItem>
                                                    <FormControl>
                                                        <div className="relative">
                                                            <Input
                                                                {...field}
                                                                type="time"
                                                                className="flex rounded-full border border-primaryGray-400 py-2 pe-4 ps-12"
                                                                value={field.value}
                                                            />
                                                            <div className="absolute left-0 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 transform items-center justify-center rounded-s-full bg-primaryGray-100">
                                                                <span>De</span>
                                                            </div>
                                                        </div>
                                                    </FormControl>
                                                    <FormMessage />
                                                </FormItem>
                                            )}
                                        />
                                        <FormField
                                            control={form.control}
                                            name={`breakTime.${index}.finish` as const}
                                            render={({ field }) => (
                                                <FormItem>
                                                    <FormControl>
                                                        <div className="relative">
                                                            <Input
                                                                {...field}
                                                                type="time"
                                                                className="flex rounded-full border border-primaryGray-400 py-2 pe-4 ps-12"
                                                                value={field.value}
                                                            />
                                                            <div className="absolute left-0 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 transform items-center justify-center rounded-s-full bg-primaryGray-100">
                                                                <span>Até</span>
                                                            </div>
                                                        </div>
                                                    </FormControl>
                                                    <FormMessage />
                                                </FormItem>
                                            )}
                                        />
                                        <TooltipProvider>
                                            <Tooltip>
                                                <TooltipTrigger asChild>
                                                    <Button
                                                        variant={"destructive"}
                                                        size={"sm"}
                                                        type="button"
                                                        className="rounded-full p-2"
                                                        onClick={() => remove(index)}
                                                    >
                                                        <Trash />
                                                    </Button>
                                                </TooltipTrigger>
                                                <TooltipContent className="border-0 bg-red-500 text-secondaryWhite-100 dark:border-0 dark:bg-red-500">
                                                    <p>Excluir</p>
                                                </TooltipContent>
                                            </Tooltip>
                                        </TooltipProvider>
                                    </div>
                                ))}

我尝试使用文档中的受控字段数组https://react-hook-form.com/docs/usefieldarray但没有成功。

Answer 1

@Ja1za1，嘿，您可以从父组件中获取数据并使用加载状态直到获取数据。

这是家长

const Parent = () => {
const {data, isLoading} = fetch("url");

if(isLoading) {return <Loading />}

if(data) {
   return <Child data={data} />
 }
}

return null

这就是孩子

//CHILD
const Child = ({data}) => {
const form = useForm<OperatorOrManageData>({
resolver: zodResolver(operatorOrManagerSchema),
defaultValues: initializeDefaultValues(),
mode: "all",
values: data,
})
 //...other codes
 }

但是，

form.watch()

方法给了我字段数组，其值未定义。

例如：

cars:[{value: undefined]