React 挂钩表单方法 - setValue - 不起作用

Question

我有一些可清除的 select，我想将状态中的 applets 字段重置为空数组。

const defaultFormValues = { device: { ...initialDevice }, applets: [] };
  const { control, getValues, setValue, reset, handleSubmit } = useForm<CreateDeviceFormData>({
    mode: "all",
    reValidateMode: "onChange",
    defaultValues: defaultFormValues,
    resolver: yupResolver(validationSchema),
  });

  const onChangeHandler = React.useCallback(
    (value: Experience | null) => {
      if (value) {
        setValue("applets", getApplets(value));
      } else {
        setValue("applets", []);
        // reset(defaultFormValues);
      }

      setValue("device.experience_id", value ? value.id : undefined);
    },
    [templateSelector, setValue],
  );

  console.log("current data", getValues(), control);
  return (
    <>
      <SomeAutocompleteComponent control={control} onChange={onChangeHandler} />
      <SelectAppletsComponent control={control} />
    </>
  );


export const SelectAppletsComponent = ({ control, onChange }) => {
  const applets = useWatch({ control, name: "applets" }) as Applet[];
  const device = useWatch({ control, name: "device" }) as Device;

  if (!applets.length) {
    return null;
  }

  return (
    <SpanWrapper className="p-col-8">
      {applets.map((applet) => (
        <LabelRadio
          key={applet.id}
          inputId={applet.applet_type}
          value={applet.applet_type}
          label={applet.name}
          checked={device.applet_type === applet.applet_type}
          onChange={onChange}
        />
      ))}
    </SpanWrapper>
  );
};

问题是使用 setValue("applets", []); 清除 UI 上的 selection 出于某种原因不起作用，我不明白为什么，以及如何在没有 reset 方法，它会重置整个状态，而不仅仅是我理解的单个属性

Answer 1

如果要将字段用作 RHF 的表单状态，则应始终注册字段。

  React.useEffect(() => {
    register("applets");
  }, [register]);

这解决了一个问题。

Answer 2

跟进一下，确实是AuthorProxy提供的正确方案。

使用 defaultValues 不会注册字段（看起来它们仍然会在提交时添加到 formData 中，但由于它们没有注册，任何用户触发的对这些字段的更改都不会反映在 formData 上）。

您必须注册希望用户能够与之交互的每个字段。我们通常在 JSX 中通过输入来注册字段，但是我们还需要注册数组，因为在 JSX 中没有输入。

根据react hook表单库的作者展示。

https://github.com/react-hook-form/react-hook-form/discussions/3160

和沙箱

https://codesandbox.io/s/inspiring-wood-4z0n0?file=/src/App.tsx

React 挂钩表单方法 - setValue - 不起作用

React hook form method - setValue - doesn't work

javascript

frontend

reactjs

react-hooks

react-hook-form