Action function 是在 Remix js 中執行 POST 請求的唯一方法嗎？

Question

我有一個應用程序，我在其中上傳 csv，當我單擊上傳按鈕時，我將 csv 的內容作為 JSON 獲取。 我的要求是，我想暫停 POST 請求，直到我使用另一個模態組件確認上傳。 我所做的是，我在 UI 組件內創建了一個 async await 並將從 Action function 返回的數據傳遞給該 async await function confirmHandler 。 這些是我在帖子中使用的方法。

export const action = async ({ request }: ActionArgs) => {
  // Do some other work and get the csv content as a string

  const csvDataString: string = formData.get("selected_csv") as string;

  let codeListUploadValidationMessage = "";

  // Do the code list validation

  if (codeListUploadValidationMessage) {
    // if there are validation errors
    return json(
      {
        errors: {
          message: codeListUploadValidationMessage,
        },
      },
      { status: 400 }
    );
  } else {
    // if there are no any validation errors do some work convert string into an object call 'result'
    // Then return the 'result' as a JSON
    return json({ result });
  }
};

export default function Index() {
  const actionData = useActionData<typeof action>();
  const [data, setData] = React.useState([]);
  const [submitted, setSubmitted] = React.useState(false);
  const [showConfirmSave, setShowConfirmSave] = React.useState(false);
 
  React.useEffect(() => {
    setData(actionData?.result)
    console.log("=== Log of data: ", data);
  }, [actionData?.result, data]);

  React.useEffect(() => {
    switch (transition.state) {
      case "submitting":
        if (!submitted) {
          setSubmitted(true);
        }
        break;

      case "idle":
        if (submitted && data) {
          setShowConfirmSave(true);
        }
        break;
    }
  }, [data, submitted, setShowConfirmSave, setSubmitted, transition]);

  const confirmHandler = async () => {
    await bulkUploadCodeList(data);
    setShowConfirmSave(false);
  };

  if (showConfirmSave) {
    return <Confirm onConfirm={confirmHandler} />;
  }

return(
    <div>
      <Form method="post">
        <button type="submit">Upload data</button>
      </Form>
    </div>  
  );
}

.

所以這是confirm模式

import {
  Link,
} from "@remix-run/react";
import React from "react";

interface ConfirmProps {
  onConfirm: () => void;
}

export default function Confirm({ onConfirm }: ConfirmProps) {
  return (
    <div>
      <div>
        <h1>Are you sure you want to save the data?</h1>
      </div>
      <div>
        <button type="button" onClick={onConfirm}>Save</button>
      </div>
      <div>
        <Link to="/codes/uploadCodeList">
          <button type="button">Cancel</button>
        </Link>
      </div>
    </div>
  );
}

現在，當我單擊“上傳”按鈕時，我可以獲得確認模式，但是那個 async await function 沒有對后端執行任何 POST 請求。 我該如何解決這個問題？ 非常感謝您的幫助。

Answer 1

您應該使用useSubmit()掛鈎。 這就是您在 Remix 中以編程方式提交的方式。 因此，在您的onConfirm()處理程序中，提示確認，如果是，則調用submit() ，否則調用event.preventDefault() 。

https://reactrouter.com/en/main/hooks/use-submit