执行Remix.run ActionFunction后React组件未重渲染问题

1. 确认表单使用Remix专属组件 #

必须使用Remix提供的<Form>组件替代原生<form>，原生表单会触发页面刷新，无法保留客户端状态并更新useActionData。

// 正确用法（需先导入）
import { Form } from "@remix-run/react";

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

2. 验证ActionFunction是否正常执行 #

在ActionFunction中添加调试日志，确认函数被触发且返回值正确：

export async function action({ request }) {
  console.log("Action已触发");
  return json({ message: "Success!", status: 200 });
}

同时检查返回的状态码必须为2xx，非2xx状态码会导致useActionData无法获取数据。

3. 确保组件在路由层级内 #

useActionData仅能在路由组件（routes目录下的对应文件）或其子组件中使用，非路由组件无法获取Action返回值。如果是子组件，避免使用React.memo时遗漏依赖导致组件不更新。

4. 检查提交导航状态 #

用useNavigation钩子查看提交状态，确认提交是否完成：

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

function YourComponent() {
  const submitResponse = useActionData();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === "submitting";

  return (
    <Page narrowWidth title="Opret produkt">
      <Card>
        {isSubmitting ? <h1>提交中...</h1> : (
          <h1>{submitResponse?.message || "No Message"}</h1>
        )}
      </Card>
    </Page>
  );
}

若isSubmitting持续为true，说明提交未完成，需排查ActionFunction是否抛出错误或未正确返回响应。

5. 升级Remix到稳定版 #

部分旧版本Remix存在useActionData的已知bug，执行命令升级依赖：

npm update @remix-run/react @remix-run/node @remix-run/serve

内容的提问来源于stack exchange，提问作者Mathias Schrøder