React Hook Form 在 API 调用后更改默认值

Question

调用API后如何更新默认值？

这就是我想要实现的目标：

• 我有一张卡片，可以在其中查看评论。
• 有一个按钮可以切换文本字段，允许我添加/编辑/删除评论
• 我还可以放弃在保存版本之前所做的更改，为此我将显示原始的默认值

现在假设我已经留下了评论

Comment test 1

，因此当渲染卡片时，它将使用

defaultValues

的注入数据显示评论。我将注释编辑为

Comment test 2

，然后单击保存，现在显示的注释来自状态值，而不是来自默认值。现在我想编辑到

Comment Test 3

，但我改变了主意并放弃了更改。现在卡片将显示默认值

Comment Test 1

，而它应该显示

Comment Test 2

。

所以我想有一种方法可以在调用API后更新defaultValues，我已经尝试成功使用

resetField('comment', { defaultValue: { ...comment } });

，但是默认评论没有更新。

解决问题的更好方法是什么？

Answer 1

您可以做的是将保存的值存储在变量中（例如

overwrittenForm

），然后使用 useForm 挂钩中的

formContext.reset(overwrittenForm)

并将其传递给变量以重置为最新状态。

Answer 2

您是否尝试过在 defaultValue 中使用异步，如下所示？

 ...
 const form = useForm<z.infer<typeof InfoSchema>>({
    resolver: zodResolver(InfoSchema),

    defaultValues: async () => {
        const { data } = await getDataFromApi()

        return {
            item1: data?.item1 as string ?? undefined,
            comment1: data?.comment2 as string ?? undefined,
        }
    },
 });
 ...