React Hook Form无法识别useState绑定的输入值变更问题

你这里的核心矛盾是React Hook Form的内部表单状态和你手动维护的state变量没有同步：

• 当你用register注册输入框时，Hook Form会自行维护该输入框的状态；但你同时绑定了value={state}和自定义onChange，等于创建了两套独立的状态体系。
• 手动输入时，你的onChange更新了state，同时register默认的onChange也更新了Hook Form的内部状态，所以提交能拿到正确值。
• 点击increase按钮时，你只更新了自己的state，却没同步Hook Form的内部状态，导致提交时Hook Form返回的还是初始值1。

方案一：同步Hook Form内部状态 #

从useForm中解构出setValue，在更新自身state的同时，调用setValue同步Hook Form的状态：

export default function App() {
  const {register, handleSubmit, setValue} = useForm()
  const [state, setState] = useState(1)
  
  // 统一处理值更新逻辑
  const updateInputValue = (newValue) => {
    setState(newValue)
    setValue('input', newValue)
  }

  const onSubmit = (data) => {
    console.log(data.input) // 现在能获取当前正确值
  }
 
  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input 
          type='text' 
          {...register('input')} 
          value={state} 
          onChange={(e) => updateInputValue(e.target.value)}
        />
        <button type='button' onClick={() => updateInputValue(state + 1)}>
          increase
        </button>
        <button type="submit">submit</button>
      </form>
    </>
  );
}

方案二：用Controller统一管理（推荐） #

既然使用React Hook Form，更规范的做法是用它提供的Controller组件管理受控输入框，无需自行维护state，所有状态由Hook Form统一管控：

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

export default function App() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      input: 1 // 设置初始值
    }
  });

  const onSubmit = (data) => {
    console.log(data.input); // 正确获取当前值
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="input"
          control={control}
          render={({ field }) => (
            <input 
              type="text" 
              value={field.value} 
              onChange={field.onChange}
            />
          )}
        />
        <button 
          type="button" 
          onClick={() => {
            control.setValue('input', prev => Number(prev) + 1)
          }}
        >
          increase
        </button>
        <button type="submit">submit</button>
      </form>
    </>
  );
}

内容的提问来源于stack exchange，提问作者Далер Z