为什么单击按钮后值会从对象中删除？

Question

我正在为我的演示应用程序使用以下包。 https://www.npmjs.com/package/mui-react-hook-form-plus

上面的包依赖于 react-hook-form

单击按钮后对象键被删除，不知道为什么？

我在单击按钮时设置这样的值。

const update = () => {
    const data = {
      person: { firstName: "", lastName: "", sex: "Male" },
    };

    setValues(data);
  };

这是我的组件

export default function App() {
  const defaultValues = {
    person: { firstName: "", lastName: "", sex: "" },
  };

  const methods = useHookForm<any>({
    defaultValues,
  });

  const { registerState, handleSubmit, getValues, setValues } = methods;
  console.log(getValues());
  const onSubmit = (data: any) => {
    console.log(JSON.stringify(getValues(), null, 2));
  };
  const update = () => {
    const data = {
      person: { firstName: "", lastName: "", sex: "Male" },
    };

    setValues(data);
  };
  return (
    <div className="App">
      <HookFormProvider {...methods}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <Stack direction="row" spacing={2}>
            <HookTextField
              {...registerState("person.firstName")}
              textFieldProps={{ label: "First Name" }}
            />
            <HookTextField
              {...registerState("person.lastName")}
              textFieldProps={{ label: "Last Name" }}
            />
          </Stack>
          <button onClick={update}>set value</button>
          <br />
          {JSON.stringify(getValues("person"), null, 2)}
          <br />
        </form>
      </HookFormProvider>
    </div>
  );
}

代码 https://codesandbox.io/p/sandbox/ress-cs8fd4?file=%2Fsrc%2FApp.tsx%3A13%2C1-56%2C2

重现步骤

1. 运行应用程序..查看 OBJECT 值 { "firstName": "", "lastName": "", "sex": "" }
2. 单击按钮查看对象 { "sex": "Male" }
3. 名字。和姓氏键从对象中删除为什么？

我说内部删除字段为什么 https://github.com/adiathasan/mui-react-hook-form-plus/blob/master/src/utils/form-utils.ts

Answer 1

此代码确保在使用 update 函数更新 sex 属性时保留firstName 和lastName 属性。

export default function App() {
  const defaultValues = {
    person: { firstName: "", lastName: "", sex: "" },
  };

  const methods = useHookForm<any>({
    defaultValues,
  });

  const { handleSubmit, getValues, setValues } = methods;

  const onSubmit = (data: any) => {
    console.log(JSON.stringify(getValues(), null, 2));
  };

  const update = () => {
    const data = {
      person: {
        ...getValues("person"), // Get the current values of the person object
        sex: "Male", // Update the sex property
      },
    };

    setValues(data);
  };

  return (
    <div className="App">
      <HookFormProvider {...methods}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <Stack direction="row" spacing={2}>
            <HookTextField
              {...methods.registerState("person.firstName")}
              textFieldProps={{ label: "First Name" }}
            />
            <HookTextField
              {...methods.registerState("person.lastName")}
              textFieldProps={{ label: "Last Name" }}
            />
          </Stack>
          <Button variant="contained" onClick={update}>
            Set Value
          </Button>
          <br />
          {JSON.stringify(getValues("person"), null, 2)}
          <br />
        </form>
      </HookFormProvider>
    </div>
  );
}