React-hook-form + NextJS：组件值无法更新问题求助

核心问题 #

你的组件和React Hook Form（RHF）无法同步主要有几个关键原因：

1. 组件内部维护独立state，没有响应外部传入的value，导致和RHF的表单状态完全脱节
2. 增减按钮、输入框的更新逻辑只修改了内部state，没触发外部的onChange回调
3. 输入框直接把字符串值存入state，和RHF定义的数字数组类型不匹配
4. 组件输出单个数值，但表单schema定义的是数组类型，类型不匹配导致RHF拒绝更新

修复步骤 #

1. 将组件改为受控组件，同步外部状态

重构组件，让它响应外部传入的value，同时统一值更新逻辑，确保每次变化都通知外部：

function SliderWithCounter({ min, max, step = 1, onChange, value }: {
  min: number;
  max: number;
  step?: number;
  onChange: (value: number) => void;
  value: number;
}) {
  // 用外部传入的value初始化，监听外部值变化同步内部状态
  const [sliderValue, setSliderValue] = useState(value);

  useEffect(() => {
    setSliderValue(value);
  }, [value]);

  // 统一处理值更新，自动做边界限制并触发外部回调
  const updateValue = (newValue: number) => {
    const clampedValue = Math.max(min, Math.min(max, newValue));
    setSliderValue(clampedValue);
    onChange(clampedValue);
  };

  const handleSliderChange = (newValue: number[]) => {
    // ShadCN Slider的onChange返回数组，取第一个元素
    updateValue(newValue[0]);
  };

  const handleIncrement = () => {
    updateValue(sliderValue + step);
  };

  const handleDecrement = () => {
    updateValue(sliderValue - step);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 转换为数字，过滤非数字输入
    const numValue = parseInt(e.target.value, 10);
    if (!isNaN(numValue)) {
      updateValue(numValue);
    }
  };

  return (
    <div className="flex flex-row justify-between items-center gap-2 ">
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger type="button">
            <Slider
              value={[sliderValue]}
              max={max}
              step={step}
              onChange={handleSliderChange}
              className="w-[250px] md:flex hidden"
            />
          </TooltipTrigger>
          <TooltipContent sideOffset={5}>{sliderValue}</TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <div className="flex flex-row gap-2 items-center justify-center">
        <Button onClick={handleIncrement} variant="outline" type="button">
          +
        </Button>
        <Input
          value={sliderValue}
          className="md:w-[60px]"
          onChange={handleInputChange}
          type="number" // 限制输入为数字类型
        />
        <Button onClick={handleDecrement} variant="outline" type="button">
          -
        </Button>
      </div>
    </div>
  );
}
export default SliderWithCounter;

2. 调整表单配置与组件调用

你的组件输出单个数字，但原表单schema定义的是数组，这里分两种情况处理：

• 如果batchSize应该是单个数字（更符合业务逻辑）：修改schema和默认值

// 原schema
// batchSize: z.array(z.number()),
// 修改为
batchSize: z.number().min(1).max(20),
// 默认值从 [] 改为 1
defaultValues: {
  batchSize: 1,
}

然后在FormField中传入RHF的字段值和回调：

<FormField
  control={form.control}
  name="batchSize"
  render={({ field }) => {
    return (
      <FormItem>
        <FormLabel className="flex flex-row items-center gap-2">
          Batch size
          <ToolTipComponent tooltipText="Number of images" />
        </FormLabel>
        <FormControl>
          <SliderWithCounter
            min={1}
            max={20}
            onChange={field.onChange}
            value={field.value}
            step={1}
          />
        </FormControl>
        <FormMessage />
      </FormItem>
    );
  }}
/>

• 如果必须用数组类型：修改组件的onChange返回数组（onChange([clampedValue])），同时确保表单schema和默认值匹配。

3. 验证修复效果

现在组件的所有操作（滑块拖动、增减按钮、输入框输入）都会同步到RHF的表单状态，表单的onChange应该能正常触发，控制台也能看到对应日志。

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