React Hook Form 和页面重新加载时的持久数据

Question

我正在使用 React Hook Form v7，我试图使我的数据表单在页面重新加载时保持不变。我阅读了RHF官方文档，其中建议使用小状态机，我尝试实现它，但没有成功。有更好的方法吗？然而...

我使用它遇到的第一个问题是我的数据是一个复杂的对象，所以它updateAction应该不那么容易。

第二个问题是我不知道何时以及如何触发updateAction来保存数据。我应该在输入模糊时触发它吗？关于输入更改？

这是我的测试代码：

Answer 1

如果坚持使用 localStorage 对您有用，那么我是这样实现的。

\n

定义一个自定义挂钩来保存数据

\n

export const usePersistForm = ({\n  value,\n  localStorageKey,\n}) => {\n  useEffect(() => {\n    localStorage.setItem(localStorageKey, JSON.stringify(value));\n  }, [value, localStorageKey]);\n\n  return;\n};\n\n

\n

只需在表单组件中使用它即可

\n

const FORM_DATA_KEY = "app_form_local_data";\n\nexport const AppForm = ({\n  initialValues,\n  handleFormSubmit,\n}) => {\n  // useCallback may not be needed, you can use a function\n  // This was to improve performance since i was using modals\n  const getSavedData = useCallback(() => {\n    let data = localStorage.getItem(FORM_DATA_KEY);\n    if (data) {\n     // Parse it to a javaScript object\n      try {\n        data = JSON.parse(data);\n      } catch (err) {\n        console.log(err);\n      }\n      return data;\n    }\n    return initialValues;\n  }, [initialValues]);\n\n  const {\n    handleSubmit,\n    register,\n    getValues,\n    formState: { errors },\n  } = useForm({ defaultValues: getSavedData() });\n  const onSubmit: SubmitHandler = (data) => {\n     // Clear from localStorage on submit\n     // if this doesn\xe2\x80\x99t work for you, you can use setTimeout\n     // Better still you can clear on successful submission\n    localStorage.removeItem(FORM_DATA_KEY);\n    handleFormSubmit(data);\n  };\n\n  // getValues periodically retrieves the form data\n  usePersistForm({ value: getValues(), localStorageKey: FORM_DATA_KEY });\n\n  return (\n    <form onSubmit={handleSubmit(onSubmit)}>\n      ...\n    </form>\n   )\n}\n\n

\n

Answer 2

我已经遇到了这个问题，并通过创建一个名为 的自定义 Hook 来实现它useLocalStorage。但由于您使用的是 React hook 形式，这使得代码有点复杂而且不太干净！

我建议你只使用轻包react-hook-form-persist。您唯一需要做的工作就是一个useFormPersist接一个地添加钩子useForm。完毕！

import { useForm } from "react-hook-form";
import useFormPersist from "react-hook-form-persist";

const yourComponent = () => {
  const {
    register,
    control,
    watch,
    setValue,
    handleSubmit,
    reset
  } = useForm({
    defaultValues: initialValues
  });

  useFormPersist("form-name", { watch, setValue });

  return (
    <TextField
      title='title'
      type="text"
      label='label'
      {...register("input-field-name")}
    />
    ...
  );
}