如何在 React Hook Form 中正确更新 API 填充的表单字段值-js教程-PHP中文网

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

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

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

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

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

React Flow Architecture

提供使用 React Flow 构建基于节点的 UI 的架构指导，适用于设计基于流程的应用程序，在状态管理、交互和性能等方面进行决策。

下载

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

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 (

); }

? 关键要点总结：