如何用react-hook-form处理含多字段的外部Address组件？

针对你无法修改外部Address组件、需要注册嵌套字段并配置校验的场景，完全可以通过Controller结合react-hook-form的嵌套字段能力实现，以下是具体步骤：

1. 初始化表单时配置默认值 #

首先在useForm中设置address对象的默认值，确保嵌套字段有初始状态：

import { useForm, Controller } from "react-hook-form";

const { control, handleSubmit, formState: { errors } } = useForm({
  defaultValues: {
    address: {
      street: "",
      postalCode: "",
      city: ""
    }
  }
});

2. 用Controller包裹Address组件并同步字段 #

将Controller的name设为"address"（对应嵌套对象的根路径），然后在render回调中：

• 把value的各属性传递给Address组件的对应字段
• 通过Address组件的变更回调（比如分字段的onStreetChange或统一onChange，根据组件实际API调整），将字段更新同步到react-hook-form的onChange方法中

示例代码（分字段回调场景） #

如果Address组件为每个输入字段提供独立的变更回调：

<Controller
  control={control}
  name="address"
  // 配置嵌套字段的校验规则
  rules={{
    validate: (address) => {
      const fieldErrors = {};
      if (!address.street.trim()) {
        fieldErrors.street = "街道地址不能为空";
      }
      if (!address.postalCode.trim()) {
        fieldErrors.postalCode = "邮编不能为空";
      }
      if (!address.city.trim()) {
        fieldErrors.city = "城市不能为空";
      }
      return Object.keys(fieldErrors).length ? fieldErrors : undefined;
    }
  }}
  render={({ field: { value, onChange } }) => (
    <Address
      street={value.street}
      postalCode={value.postalCode}
      city={value.city}
      // 同步每个字段的变更到form状态
      onStreetChange={(newStreet) => onChange({ ...value, street: newStreet })}
      onPostalCodeChange={(newCode) => onChange({ ...value, postalCode: newCode })}
      onCityChange={(newCity) => onChange({ ...value, city: newCity })}
    />
  )}
/>

示例代码（统一onChange场景） #

如果Address组件提供统一的onChange回调，直接传递完整的地址对象：

<Controller
  control={control}
  name="address"
  rules={{/* 同上校验规则 */}}
  render={({ field: { value, onChange } }) => (
    <Address
      value={value}
      onChange={(updatedAddress) => onChange(updatedAddress)}
    />
  )}
/>

3. 显示各字段的错误信息 #

通过formState.errors可以获取嵌套字段的错误，直接对应到每个字段显示：

{errors.address?.street && <span className="error">{errors.address.street.message}</span>}
{errors.address?.postalCode && <span className="error">{errors.address.postalCode.message}</span>}
{errors.address?.city && <span className="error">{errors.address.city.message}</span>}

4. 更灵活的校验方式（可选） #

如果需要更复杂的校验逻辑，推荐使用yup等校验库结合yupResolver，这样可以更清晰地定义每个嵌套字段的规则：

import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const addressSchema = yup.object().shape({
  address: yup.object().shape({
    street: yup.string().required("街道地址不能为空"),
    postalCode: yup.string().required("邮编不能为空").matches(/^\d{6}$/, "邮编格式无效"),
    city: yup.string().required("城市不能为空")
  })
});

// 初始化useForm时传入resolver
const { control, handleSubmit, formState: { errors } } = useForm({
  defaultValues: {
    address: { street: "", postalCode: "", city: "" }
  },
  resolver: yupResolver(addressSchema)
});

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