怎样在 React Hook Form 中正确更新 API 填充的表单字段值

本文详解如何使用 setValue 主动同步外部数据（如 API 返回的地址信息）到 React Hook Form 的受控字段，解决自动填充字段不被表单捕获的问题。

本文详解如何使用 `setvalue` 主动同步外部数据（如 api 返回的地址信息）到 react hook form 的受控字段，解决自动填充字段不被表单捕获的问题。

在使用 React Hook Form 时，一个常见误区是：将受控输入（controlled input）与独立的 useState 状态混用。正如问题中所示，开发者通过 useState 管理 Street，再将其作为 value 传给 <input {...register('Street')} />，却忽略了 React Hook Form 的核心机制——它要求所有注册字段必须由 register 和内部状态统一管理，而非外部 state + value 的“半受控”模式。

当字段使用 value={Street} 时，React Hook Form 实际上已失去对该字段的控制权（变成非受控或混合受控），导致 watch()、getValues() 和提交数据中均无法读取 API 写入的值。

✅ 正确做法是：移除 useState 对字段的冗余管理，直接通过 setValue 更新表单内部状态。

以下是优化后的完整实现：

import { useForm } from 'react-hook-form';function OrderForm() {  const { register, handleSubmit, watch, setValue, getValues } = useForm();  const cep = watch('CEP');  // 验证 CEP 格式  const isCepValid = /^[0-9]{5}-[0-9]{3}$/.test(cep);  // 使用 useEffect 监听 CEP 变化，并调用 API 填充 Street  useEffect(() => {    const fetchCepData = async () => {      if (!isCepValid) {        setValue('Street', ''); // 清空字段        return;      }      try {        const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);        const data = await response.json();        if (!data.erro) {          setValue('Street', data.logradouro || ''); // ✅ 关键：用 setValue 同步到表单状态        } else {          setValue('Street', '');        }      } catch (error) {        console.error('CEP lookup failed:', error);        setValue('Street', '');      }    };    // 添加防抖或节流可选（避免频繁请求）    const timer = setTimeout(fetchCepData, 300);    return () => clearTimeout(timer);  }, [cep, isCepValid, setValue]);  const onSubmit = (data) => {    console.log('Submitted form data:', data); // ✅ Street 将包含 API 值    addOrderInfos(data);    navigate('/success');  };  return (    <form onSubmit={handleSubmit(onSubmit)} id="orderForm">      <input        type="text"        id="CEP"        placeholder="CEP (e.g. 00000-000)"        {...register('CEP')}      />      <input        type="text"        id="Street"        placeholder="Street"        {...register('Street')} // ✅ 移除 value={Street}，完全交由 RHF 管理      />      <button type="submit">Submit</button>    </form>  );}

? 关键要点总结：

• ❌ 不要为已 register 的字段额外声明 useState 并设置 value 属性；
• ✅ 使用 setValue('fieldName', newValue) 主动写入表单状态，确保该字段参与验证、监听与提交；
• ✅ setValue 支持第三个参数 { shouldValidate: true, shouldDirty: true }，可触发校验或标记为“已修改”；
• ⚠️ 注意 useEffect 依赖项：应监听 cep（而非 watch('CEP') 的调用结果），避免无限循环；
• ? 如需响应式预填多个字段（如 Street, City, State），可批量调用 setValue 或使用 reset({ ... })。

通过这一调整，watch('Street')、getValues() 和最终提交的 data 都将准确反映 API 填充的内容，彻底解决“字段不被注册”的问题。