我如何使用 react-hook-form 具有未定义的 defaultValue？

Question

我使用来自 react-hook-form 的控制器有这个表单：

<Controller name="myField" control={control} as={(
 <>
   <input type="radio" value="true" />
   <input type="radio" value="false" />
 </>
)}/>

正在抱怨： “myField 在其控制器的 'defaultValue' 道具中丢失”

但是……事情是这样的。该值需要未定义。用户需要 select 一个值，否则会在表单上出现验证错误。他们需要选择一个或另一个，我们不想在这里有一个默认的“是”或“否”。

如何摆脱这些警告？根据 react-hook-form 的文档，我做错了什么，因为它说：“不能取消定义内联或在 useForm 处设置 defaultValue。”。但是...这正是我想要的。

编辑：澄清一点。我有一个使用 yup 的模式验证，如下所示：

yup.object().shape({
 myField: yup.boolean().required()
});

现在，当我将 defaultValue 设置为空字符串时，我需要添加一个转换：.transform((x) => (x === '' ? undefined : x)) 这是我想避免的事情，因为它很快就会变得一团糟。

Answer 1

我建议不要在此处使用 undefined，而是使用 null 作为您的 defaultValue。 null 表示没有值，另一方面 undefined 表示 property/variable 尚未定义。

如果您确实需要使用 undefined 作为您的收音机输入，您可以只使用 register，因为您的收音机输入是原生 HTML <input /> 元素。

How do I have undefined defaultValue with react-hook-form?