使用react-hook-form配合计数器时无法获取正确值

我实现了一个简单的计数器组件，界面上数值能正常增减，但表单提交时获取到的计数器值始终为0。

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const [quantity, setQuantity] = React.useState(0);

  const decrement = () => {
    setQuantity((prev) => (prev === 0 ? 0 : prev - 1));
  };

  const increment = () => {
    setQuantity((prev) => prev + 1);
  };

  const formSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <h1>Counter</h1>
      <form onSubmit={handleSubmit(formSubmit)}>
        <button type="button" onClick={decrement}>
          -
        </button>
        <input type="number" value={quantity} {...register("quantity")} />
        <button type="button" onClick={increment}>
          +
        </button>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

你手动给input设置了value={quantity}，同时又用react-hook-form的register注册该输入框。register会自动为输入框绑定内部状态管理和onChange事件，而手动设置的value会覆盖register的状态同步逻辑——组件的quantity状态更新时，输入框显示会变化，但react-hook-form内部维护的表单状态并未同步更新，所以提交时拿到的还是初始值0。

有两种常用修复方式：

方式一：同步组件状态与表单状态 #

在增减数量时，同时调用react-hook-form的setValue方法同步表单状态：

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, setValue } = useForm();
  const [quantity, setQuantity] = React.useState(0);

  const decrement = () => {
    const newVal = quantity === 0 ? 0 : quantity - 1;
    setQuantity(newVal);
    setValue("quantity", newVal);
  };

  const increment = () => {
    const newVal = quantity + 1;
    setQuantity(newVal);
    setValue("quantity", newVal);
  };

  const formSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <h1>Counter</h1>
      <form onSubmit={handleSubmit(formSubmit)}>
        <button type="button" onClick={decrement}>
          -
        </button>
        <input type="number" value={quantity} {...register("quantity")} />
        <button type="button" onClick={increment}>
          +
        </button>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

方式二：完全使用react-hook-form的状态管理（推荐） #

去掉自定义的useState，直接用react-hook-form的表单状态管理数量，无需手动同步：

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, setValue } = useForm({
    defaultValues: { quantity: 0 }
  });
  const quantity = watch("quantity");

  const decrement = () => {
    setValue("quantity", prev => prev === 0 ? 0 : prev - 1);
  };

  const increment = () => {
    setValue("quantity", prev => prev + 1);
  };

  const formSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <h1>Counter</h1>
      <form onSubmit={handleSubmit(formSubmit)}>
        <button type="button" onClick={decrement}>
          -
        </button>
        <input type="number" {...register("quantity")} />
        <button type="button" onClick={increment}>
          +
        </button>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

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