Remix表单提交后数据刷新与字段重置策略

import { useLoaderData, useActionData, Form, useLocation } from "@remix-run/react";
import { LoaderArgs, ActionArgs, redirect } from "@remix-run/node";

// 示例 loader 函数：获取初始值
export async function loader({ request }: LoaderArgs) {
  // 模拟从数据库获取数据
  const value = await new Promise(resolve => setTimeout(() => resolve("Hello Remix World!"), 100));
  return {
    value: value.substring(0, 10), // 初始显示前10个字符
    timestamp: Date.now() // 可以用于更稳定的key
  };
}

// 示例 action 函数：处理表单提交
export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
  const newValue = formData.get("newValue");

  // 模拟服务器端验证
  const isValid = (val: FormDataEntryValue | null) => val && String(val).length > 0 && String(val).length <= 20;

  if (isValid(newValue)) {
    // 模拟保存数据到数据库
    console.log("Saving new value:", newValue);
    // 成功后重定向到当前页面
    return redirect("/update-value"); // 假设当前路由就是 /update-value
  }

  // 验证失败，返回错误信息和用户输入的值
  return {
    errors: {
      newValue: true
    },
    values: {
      newValue
    }
  };
}

export default function Page() {
  const loaderData = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  const location = useLocation(); // 引入 useLocation 钩子

  return (
    // 将 key prop 添加到 Form 组件上
    // 使用 location.key 会在每次重新渲染时强制 Form 重新挂载
    <Form method="POST" key={location.key}>
      <label htmlFor="newValue">新值:</label>
      <input
        type="text"
        name="newValue"
        id="newValue"
        // 如果有验证错误，显示用户输入的值；否则显示 loader 加载的最新值
        defaultValue={actionData?.errors?.newValue ? String(actionData.values.newValue) : loaderData.value}
      />
      {actionData?.errors?.newValue && <p style={{ color: 'red' }}>值无效，长度需在1-20之间。</p>}
      <button type="submit">更新</button>
    </Form>
  );
}

// 修改 loader 函数，返回一个时间戳
export async function loader({ request }: LoaderArgs) {
  // ... (获取 value 的逻辑不变) ...
  return {
    value: value.substring(0, 10),
    timestamp: Date.now() // 返回一个时间戳
  };
}

// ... (action 函数不变) ...

export default function Page() {
  const loaderData = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  // const location = useLocation(); // 如果不使用 location.key，则无需引入

  return (
    // 使用 loaderData 中的 timestamp 作为 key
    // 这样只有当 loader 重新执行并返回新的 timestamp 时，Form 才会重新挂载
    <Form method="POST" key={loaderData.timestamp}>
      <label htmlFor="newValue">新值:</label>
      <input
        type="text"
        name="newValue"
        id="newValue"
        defaultValue={actionData?.errors?.newValue ? String(actionData.values.newValue) : loaderData.value}
      />
      {actionData?.errors?.newValue && <p style={{ color: 'red' }}>值无效，长度需在1-20之间。</p>}
      <button type="submit">更新</button>
    </Form>
  );
}