React Hook Form中API自动填充的表单字段未被注册问题求助

问题出在你用独立的useState管理自动填充字段的值，但React Hook Form有自己的内部表单状态体系。手动给Street输入框设value={Street}后，没有同步更新React Hook Form的内部状态，导致watch()看不到变化，提交时也拿不到该字段数据。

具体修复步骤 #

1. 移除自定义cepInfo状态：无需外部state存Street值，直接用React Hook Form的状态管理。
2. 用setValue更新表单字段：API请求成功后，调用React Hook Form提供的setValue更新Street字段，同步表单内部状态。
3. 修正依赖与验证逻辑：把CEP格式验证放到useEffect内部，useEffect依赖直接用cep即可，不用嵌套watch('CEP')。
4. 简化Street输入框属性：无需手动设置value，register会自动处理表单状态与输入框的绑定。

修改后的完整代码示例 #

import { useForm } from 'react-hook-form';
// 其他必要导入（如db、navigate等）

function YourComponent() {
  const { register, watch, handleSubmit, setValue } = useForm();
  
  const cep = watch('CEP');

  useEffect(() => {
    const getCepInfo = async () => {
      // 内部验证CEP格式，避免依赖项问题
      const isCepValid = /^[0-9]{5}-[0-9]{3}$/.test(cep);
      
      if (isCepValid) {
        const resp = await db.get(`/${cep}/json`);
        // 用setValue同步React Hook Form内部状态
        setValue('Street', resp.data.street);
      } else {
        // 清空Street字段
        setValue('Street', '');
      }
    };

    getCepInfo();
  }, [cep, setValue]);

  const handleSubmitForm = (data) => {
    addOrderInfos(data);
    navigate('/success');
  };

  return (
    <form onSubmit={handleSubmit(handleSubmitForm)} id="orderForm">
      <input
        type="text"
        id="CEP"
        placeholder="CEP"
        {...register('CEP')}
      />

      <input
        type="text"
        id="Street"
        placeholder="Street"
        {...register('Street')}
      />
    </form>
  );
}

补充说明 #

• setValue是React Hook Form官方方法，专门用于手动更新表单内部状态，确保watch()和提交的data对象都能拿到最新值。
• 若需控制输入框显示内容，可使用watch('Street')作为value，但通常register已足够处理双向绑定，无需额外设置。
• 将CEP验证逻辑移到useEffect内部，是为了避免把isCepValid加入依赖项，减少不必要的组件渲染。

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