Remix中使用useSubmit()提交对象的正确方式探讨

你的代码可以正常运行，但并非最优实现，下面针对不同场景给出更简洁的方案：

核心结论 #

不需要手动执行JSON.stringify()和JSON.parse()处理嵌套对象，根据是否需要上传文件，有两种更合适的提交方式：

场景1：无文件上传（推荐） #

直接以application/json格式提交完整对象，Remix会自动处理序列化，action中可直接解析出完整JSON结构：

onSubmit 代码

const onSubmit = () => {
  const updatedContact = {
    name: "John Doe",
    email: "",
  };

  const updatedOrder = {
    products: [
      { id: 1, name: "Product 1", quantity: 1 },
      { id: 2, name: "Product 2", quantity: 2 },
    ],
    total: 100,
  };

  const payload = {
    id,
    product: updatedContact,
    order: { updatedOrder },
  };

  submit(payload, { method: "post", encType: "application/json" });
};

action 代码

export const action: ActionFunction = async ({ request }) => {
  const payload = await request.json();
  console.log(payload);
  // payload 直接包含完整结构：{ id, product: updatedContact, order: { updatedOrder } }
};

场景2：需要上传文件 #

此时必须使用multipart/form-data编码，这时候需要将嵌套对象序列化后存入FormData，再在action中解析：

onSubmit 代码

const onSubmit = () => {
  const updatedContact = {
    name: "John Doe",
    email: "",
  };

  const updatedOrder = {
    products: [
      { id: 1, name: "Product 1", quantity: 1 },
      { id: 2, name: "Product 2", quantity: 2 },
    ],
    total: 100,
  };

  const formData = new FormData();
  formData.append("id", id);
  formData.append("product", JSON.stringify(updatedContact));
  formData.append("order", JSON.stringify({ updatedOrder }));

  submit(formData, { method: "post" }); // 默认encType即为multipart/form-data，无需额外设置
};

action 代码

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  const id = formData.get("id") as string;
  const product = JSON.parse(formData.get("product") as string);
  const order = JSON.parse(formData.get("order") as string);
  
  console.log({ id, product, order });
};

方案对比 #

• 无文件场景用application/json：代码最简洁，省去手动序列化/反序列化步骤，符合标准JSON请求格式。
• 文件上传场景用multipart/form-data：这是浏览器处理文件上传的标准方式，此时才需要手动处理嵌套对象的JSON序列化。

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