代码之家 › 专栏 › 技术社区 › Anand

使用React Router Data Loader导航到新路由时,React Hook Form defaultValues未更新

react-hook-form react-router-dom react-hooks reactjs javascript

1

Anand · 技术社区 · 1 年前

我有一个 Product 使用数据加载器的组件 useLoaderData React路由器的钩子。该组件包含一个React Hook Form useForm 钩子和我路过 defaultValues 用于具有来自加载程序的数据的表单。现在,当我导航到不同的产品路径时( "/product/productId1" -> "/product/productId2" ),反作用钩子形式仍在使用 defaultValues 提供自 productId1 .

以下是我的组件的外观:

export const Product = (props) => {
  const data = useLoaderData();
  const navigate = useNavigate();
  const formMethods = useForm({ defaultValues: data });

  return <...>
}

我认为这是因为 使用窗体 钩子在渲染之间持续存在,即使 data 已更新。如果我使用 reloadDocument 选项进行导航时 defaultValues 数据已更新,但我不想重新加载整个文档。

把 使用窗体 钩内 useEffect 这取决于 数据 从装载机?

1 回复 | 直到 1 年前

1

0

Drew Reese 1 年前

我认为这是因为 useForm 挂钩持续存在于即使数据已经更新,也会进行渲染。

是的 使用窗体 钩子状态持续存在,因为 Product 当只有路由路径参数更新时,组件保持安装状态,例如当 "/product/:productId" 路线仍然匹配和渲染。

把 使用窗体 钩内 useEffect 那个取决于 data 从装载机?

你的想法是正确的,尽管你不能从使用中调用任何React钩子 使用效果 回调,因为这会破坏 Rules of Hooks ,例如“不要在传递给的函数内部调用Hook useMemo , useReducer 或 使用效果 ".

你可以 reset 加载时的表单数据 数据 价值更新。

基本示例:

export const Product = (props) => {
  const data = useLoaderData();
  const navigate = useNavigate();

  const formMethods = useForm({ defaultValues: data });

  React.useEffect(() => {
    if (data) {
      formMethods.reset(data, /* any reset options */);
    }
  }, [data]);

  return <...>
};