React Hook Form：如何为单个字段设多类型错误并单独清除

在React Hook Form中，clearErrors方法支持通过指定type参数来单独清除字段的某一类错误，而非清除该字段的所有错误。你只需修改clearErrors的调用方式，并修正代码中的拼写错误即可解决问题：

修改点说明 #

• 调用clearErrors时，传入包含name和type的配置对象，精准指定要清除的错误类型
• 修正代码中的拼写错误：overlappingPerioder → overlappingPeriods

修改后的完整代码 #

const incomes = getValues("incomes");
const dateGaps = findDateGaps(incomes, startDate);
const overlappingPeriods = getOverlappingPeriods(incomes);

if (dateGaps?.length) {
    const message = `Missing incomes for ${dateGaps.length > 1 ? "periods" : "period"}: ${dateGaps.map(
        (gap) => ` ${gap.from} - ${gap.to}`
    )}`;
    setError("incomes", { type: "periodGaps", message });
}

if (overlappingPeriods?.length) {
    setError("incomes", {
        type: "overlappingPeriods",
        message: JSON.stringify(overlappingPeriods),
    });
}

if (!dateGaps?.length) {
    // 仅清除periodGaps类型的错误
    clearErrors({ name: "incomes", type: "periodGaps" });
}

if (!overlappingPeriods?.length) {
    // 仅清除overlappingPeriods类型的错误
    clearErrors({ name: "incomes", type: "overlappingPeriods" });
}

这样修改后，当某一类错误的触发条件不满足时，只会清除对应的错误类型，不会影响该字段的其他类型错误。

内容的提问来源于stack exchange，提问作者Leff