Remix导航后表单输入值未更新，如何强制重渲染？

问题根源 #

从同类型路由（如从A的编辑页跳转到B的编辑页）导航时，Remix会复用现有组件实例，仅更新props。但defaultValue仅在组件首次挂载时生效，后续props变化不会触发输入框值的同步更新，这就导致DOM数据正确但界面显示未更新的情况。

可行解决方法 #

方法1：用key强制组件重新挂载 #

给编辑表单所在的路由组件或表单容器添加以当前人员id为值的key。当id变化时，React会销毁旧组件实例并创建新实例，defaultValue会重新读取最新的人员数据：

export default function PersonEditRoute() {
  const person = useLoaderData();
  return (
    <div key={person.id}>
      <form method="post">
        <input
          type="text"
          name="name"
          defaultValue={person.name}
        />
        {/* 其他表单字段与提交按钮 */}
      </form>
    </div>
  );
}

方法2：切换为受控组件同步值 #

将输入框改为受控组件，用状态绑定值，并在person数据变化时更新状态，确保界面实时同步：

import { useState, useEffect } from "react";
import { useLoaderData } from "@remix-run/react";

export default function PersonEditRoute() {
  const person = useLoaderData();
  const [name, setName] = useState(person.name);

  useEffect(() => {
    setName(person.name);
  }, [person]);

  return (
    <form method="post">
      <input
        type="text"
        name="name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      {/* 其他表单字段与提交按钮 */}
    </form>
  );
}

方法3：结合导航状态更新默认值 #

利用Remix的useNavigation监听导航状态，在路由切换加载过程中，确保输入框使用最新的人员数据：

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

export default function PersonEditRoute() {
  const person = useLoaderData();
  const navigation = useNavigation();
  const currentName = navigation.state === "loading" 
    ? navigation.formData?.get("name") || person.name 
    : person.name;

  return (
    <form method="post">
      <input
        type="text"
        name="name"
        defaultValue={currentName}
      />
      {/* 其他表单字段与提交按钮 */}
    </form>
  );
}

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