Remix中如何获取action方法数据？首次点击无返回问题求助

问题原因 #

首次点击按钮提交表单时，useActionData()获取的是当前页面渲染的旧数据——此时action还在服务端执行，页面未完成重新渲染。只有当action执行完毕、页面重新加载后，useActionData才能拿到最新返回值，所以第二次点击时能正常获取。

解决方案 #

方案1：服务端直接重定向（推荐）

Remix的action支持返回redirect()实现服务端重定向，不需要依赖前端window对象，这是最直接的解决方式。

修改action代码：

export async function action({request}){
  // 原有逻辑保持不变
  const confirmation_url_50kg = await createSubscription(args_50kg, graphql);
  
  // 替换return json为服务端重定向
  return redirect(confirmation_url_50kg);
}

提交表单后，服务端会直接跳转到目标URL，无需前端额外处理。

方案2：前端监听数据变化跳转

如果必须在前端处理跳转逻辑，可通过useEffect监听useActionData返回的data，当数据更新且存在目标URL时执行跳转：

修改Pricing组件：

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

const Pricing = () => {
  const data = useActionData();

  useEffect(() => {
    // 当data存在且包含目标URL时执行跳转
    if (data?.confirmation_url) {
      window.location.href = data.confirmation_url;
    }
  }, [data]);

  return (
    <Form method="post">
      <input type="hidden" value="1" name="plan_id" />
      {/* 注意：此处重复定义了plan_id输入框，建议删除其中一个避免数据异常 */}
      <Button submit primary>Unsubscribe</Button>
    </Form>
  );
};

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