React Hook Form 首次通过props更新表单时应使用reset还是setValue？

异常原因 #

你遇到的reset()更新嵌套address.country字段异常的问题，通常由两个配置问题导致：

• 表单初始默认值没有完整声明address.country字段，reset()默认会合并初始默认值和你传入的新值，未在初始值中提前定义的嵌套字段不会被覆盖
• 调用reset()时未传入配置项关闭默认值合并逻辑，默认情况下reset()会保留未显式传入的字段的现有值

两个方法的适用场景 #

适用reset()的场景 #

你需要将整个表单重置到特定状态，同时要清空表单的touched、dirty、校验错误等所有交互状态时使用，比如表单提交成功后重置为空、加载全新的表单数据初始化整个表单。
如果要使用reset()解决当前问题，需要调整调用逻辑：

useEffect(() => {
    let isMounted = true;
    if (isMounted && customer) {
      reset(
        {
          firstname: customer.firstname,
          lastname: customer.lastname,
          address: {
            street: customer.address.street,
            city: customer.address.city,
            country: customer.address.country,
          },
        },
        // 关闭默认值合并逻辑，完全覆盖为传入的新值
        { keepDefaultValues: false }
      );
    }
    return () => {
      isMounted = false;
    };
}, [customer, reset]);

同时要确保表单初始化时的defaultValues里完整声明了所有嵌套字段。

适用setValue()的场景 #

你只需要更新部分字段、不需要重置整个表单的交互和校验状态时使用，这个方法本身支持深层嵌套字段的精准更新，不需要提前完整声明所有初始字段，也不需要额外处理配置项，稳定性更高。

结论 #

你当前的场景更适合使用setValue()，你只是需要根据父组件传入的customer更新对应表单字段，不需要重置整个表单的状态，调用逻辑更简单，也不会出现嵌套字段更新异常的问题。

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