Remix JS中保存数据前添加确认弹窗的优化方案咨询

直接在saveData.tsx里通过组件状态和Remix的useFetcher钩子实现确认流程，无需跨路由传递数据，完美适配大量数据场景：

1. 核心思路 #

• 用组件状态存储待保存的result和确认弹窗的显示状态
• 点击"准备保存"时，将数据存入状态并弹出确认框
• 确认后通过useFetcher发起POST请求，把数据提交到当前路由的Action函数执行入库
• 取消则直接关闭弹窗，清除待保存数据

2. 完整代码示例 #

import { useState } from "react";
import { useFetcher, json, ActionFunctionArgs } from "@remix-run/react";

// 定义你的数据类型，替换成实际结构
type ResultType = {
  id?: string;
  content: string;
  // ...其他字段
};

// 假设这是你的入库函数
async function saveData(result: ResultType) {
  // 实际入库逻辑，比如调用API或操作数据库
  await fetch("/api/save", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(result),
  });
}

export async function action({ request }: ActionFunctionArgs) {
  const result = await request.json();
  try {
    await saveData(result);
    return json({ success: true });
  } catch (err) {
    return json(
      { success: false, error: "数据保存失败" },
      { status: 500 }
    );
  }
}

export default function SaveDataPage() {
  const [showConfirm, setShowConfirm] = useState(false);
  const [pendingData, setPendingData] = useState<ResultType | null>(null);
  const fetcher = useFetcher();

  // 触发保存流程（替换成你原来的保存触发逻辑）
  const handleInitiateSave = (result: ResultType) => {
    setPendingData(result);
    setShowConfirm(true);
  };

  // 确认保存
  const handleConfirm = () => {
    if (!pendingData) return;
    fetcher.submit(pendingData, {
      method: "POST",
      action: "/save-data", // 替换成当前路由的实际路径
      encType: "application/json",
    });
    setShowConfirm(false);
  };

  // 取消保存
  const handleCancel = () => {
    setShowConfirm(false);
    setPendingData(null);
  };

  return (
    <div className="container">
      {/* 加载状态提示 */}
      {fetcher.state === "loading" && (
        <div className="loading">正在保存数据...</div>
      )}

      {/* 保存结果提示 */}
      {fetcher.data?.success && (
        <div className="success">数据保存成功！</div>
      )}
      {fetcher.data?.error && (
        <div className="error">{fetcher.data.error}</div>
      )}

      {/* 确认弹窗 */}
      {showConfirm && pendingData && (
        <div className="confirm-modal">
          <h3>确认保存数据？</h3>
          {/* 可选：预览部分数据帮助用户确认 */}
          <div className="data-preview">
            <p>待保存数据摘要：</p>
            <pre>{JSON.stringify(pendingData, null, 2)}</pre>
          </div>
          <div className="modal-actions">
            <button onClick={handleConfirm} className="confirm-btn">
              确认保存
            </button>
            <button onClick={handleCancel} className="cancel-btn">
              取消
            </button>
          </div>
        </div>
      )}

      {/* 原页面内容（替换成你实际的页面结构） */}
      {!showConfirm && (
        <div className="main-content">
          {/* 比如表单、数据编辑区域等 */}
          <button
            onClick={() =>
              handleInitiateSave({
                // 示例数据，替换成你实际的result
                content: "这是待保存的大量数据内容...",
              })
            }
          >
            准备保存数据
          </button>
        </div>
      )}
    </div>
  );
}

3. 关键细节说明 #

• 数据传递：通过POST请求体传递待保存数据，避免URL参数的长度限制，支持大量数据
• 状态管理：用组件内部状态存储待保存数据和弹窗状态，无需跨路由共享
• 加载与反馈：利用useFetcher的state和data属性提供实时的加载状态和操作结果反馈
• 样式自定义：可以根据需求修改弹窗、按钮的样式，适配你的应用风格

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