react-hook-form如何记录关联useState的动态变化输入字段的值？

问题根因 #

你遇到的quantity返回undefined问题核心是以下三个错误点叠加导致：

1. 你将动态计算的{quantity}作为CounterInput组件的children传入，没有绑定到组件的value属性，原生input本身不支持children写法，这会导致输入框实际值没有同步更新
2. 你同时维护了两套独立状态：自己声明的useState状态和react-hook-form内部托管的表单状态，点击增减按钮时只更新了useState的状态，没有同步给react-hook-form
3. 如果CounterInput是你封装的自定义组件，没有正确透传register返回的ref、onChange、value属性到内部原生input，也会导致react-hook-form无法采集到字段值

解决方案 #

优先推荐你直接使用react-hook-form托管全量表单状态，不需要额外声明useState维护数量，避免双状态同步问题，改造代码如下：

逻辑层改造 #

// 删掉原有单独维护quantity的useState、增减逻辑
import { useForm } from "react-hook-form";

const { 
  register, 
  handleSubmit, 
  setValue, 
  watch,
  // 初始化默认值
} = useForm({ defaultValues: { quantity: 1 } });

// 直接从react-hook-form中订阅quantity的实时值
const quantity = watch("quantity");

const increaseQuantity = () => {
  // 直接修改react-hook-form内部状态
  setValue("quantity", quantity + 1);
};

const decreaseQuantity = () => {
  if (quantity > 1) {
    setValue("quantity", quantity - 1);
  }
};

const onSubmit = (data) => {
  // 此处可正常拿到quantity值
  console.log(data);
};

视图层改造 #

<DescriptionButtonsWrapper>
  <CounterContainer>
    <CounterWrapper>
      <CounterButtons onClick={decreaseQuantity}>-</CounterButtons>
    </CounterWrapper>
    <CounterWrapper>
      <CounterInput
        {/* 加valueAsNumber配置直接返回数字类型，避免字符串转换问题 */}
        {...register("quantity", { valueAsNumber: true })}
        placeholder="Quantity"
        id="quantity"
        type="number"
        {/* 不要将quantity作为children传入，改为绑定到value属性，如自定义组件要求value传值则补充value={quantity} */}
      />
    </CounterWrapper>
    <CounterWrapper>
      <CounterButtons onClick={increaseQuantity}>+</CounterButtons>
    </CounterWrapper>
  </CounterContainer>
</DescriptionButtonsWrapper>
<DescriptionButtonsWrapper>
  <Btn onClick={handleSubmit(onSubmit)}>Add to Cart</Btn>
</DescriptionButtonsWrapper>

特殊情况处理 #

如果CounterInput是不支持透传ref的自定义组件，可使用react-hook-form提供的Controller组件包裹，即可正常采集值。

如果你必须保留原有useState维护状态的逻辑，只需要新增useEffect同步状态即可：

useEffect(() => {
  // 每次useState的quantity变化时同步给react-hook-form
  setValue("quantity", quantity);
}, [quantity, setValue]);

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