Remix Form提交后重新加载表单数据及相关问题求助

核心问题 #

1. 表单提交成功后，输入框未加载数据库最新数据：通过redirect返回当前页后，loader已获取截断到10位的更新数据，但输入框仍显示用户提交的完整值，需手动导航离开再返回才正常。
2. 密码字段验证失败时未自动清空：期望像标准<form>那样，验证出错时密码框内容被清空。
3. 尝试添加reloadDocument属性无效，不确定是否需要改用标准<form>。

问题1：提交成功后输入框不刷新最新数据 #

原因是Remix的Form组件会利用DOM状态保留机制，导致defaultValue的更新无法触发输入框重新渲染。以下两种方案可解决：

方案A：用useNavigation同步loader数据 #

通过useNavigation判断提交状态，强制使用最新loader数据，或给输入框添加依赖于loader数据的key触发重渲染：

import { useLoaderData, useActionData, useNavigation } from "@remix-run/react";

export default function Page() {
  const loaderData = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  const navigation = useNavigation();

  const inputValue = 
    actionData?.errors.newValue ? actionData.values.newValue 
    : navigation.state === "idle" && !actionData ? loaderData.value 
    : loaderData.value;

  return (
    <Form method="POST">
      <input 
        type="text" 
        name="newValue" 
        id="newValue" 
        key={loaderData.value}
        defaultValue={inputValue} 
      />
      <button type="submit">提交</button>
    </Form>
  );
}

方案B：action直接返回更新后的数据 #

提交成功时不跳转，直接返回最新数据，组件优先使用该值：

// 修改action函数
export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
  const newValue = formData.get("newValue");

  if (isValid(newValue)) {
    const savedValue = await getValue();
    return {
      success: true,
      value: savedValue.substring(0, 10)
    };
  }

  return {
    errors: { newValue: true },
    values: { newValue }
  };
}

// 修改组件
export default function Page() {
  const loaderData = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();

  const inputValue = 
    actionData?.errors?.newValue ? actionData.values.newValue 
    : actionData?.success ? actionData.value 
    : loaderData.value;

  return (
    <Form method="POST">
      <input 
        type="text" 
        name="newValue" 
        id="newValue" 
        defaultValue={inputValue} 
      />
      <button type="submit">提交</button>
    </Form>
  );
}

问题2：验证失败时清空密码字段 #

针对密码字段，验证失败时强制设置defaultValue为空字符串，模拟标准<form>行为：

<input 
  type="password" 
  name="password" 
  id="password" 
  defaultValue={actionData?.errors?.password ? "" : undefined} 
/>

关于reloadDocument无效的问题 #

确保属性正确添加到<Form>组件上：

<Form method="POST" reloadDocument>
  {/* 表单内容 */}
</Form>

如果仍无效，优先使用上述方案1的方法，无需依赖全页刷新。

是否需要改用标准<form>？ #

不需要，Remix的Form组件提供更好的SPA体验和数据同步能力，上述方案已覆盖所有需求。仅在完全依赖浏览器原生表单行为的特殊场景下，才考虑切换。

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