在Remix React中批量获取FormData字段的方法

你可以通过以下几种方式批量处理FormData，避免逐个调用formData.get()：

1. 针对指定字段批量转换 #

如果明确知道需要获取的字段列表，可以先定义字段数组，再通过映射生成目标对象，同时设置默认空字符串：

export const action: ActionFunction = async ({ request }: ActionFunctionArgs) => {
  const formData = await request.formData();
  
  // 定义需要提取的字段
  const targetFields = ["name", "website_url", "user_id"];
  
  // 批量转换为键值对对象
  const formDataObj = Object.fromEntries(
    targetFields.map(field => [field, (formData.get(field) ?? "") as string])
  );

  try {
    // 调用API时可直接使用formDataObj.name、formDataObj.website_url等
    // call api here
    return null;
  } catch (error) {
    throw json({ error: "Error" }, { status: 500 });
  }
};

2. 遍历所有FormData字段 #

如果需要获取表单中所有字段，无需提前指定，可以直接遍历FormData的所有条目：

export const action: ActionFunction = async ({ request }: ActionFunctionArgs) => {
  const formData = await request.formData();
  
  // 遍历所有字段并转换为对象
  const formDataObj = Object.fromEntries(
    Array.from(formData.entries()).map(([key, value]) => [key, (value ?? "") as string])
  );

  try {
    // call api here
    return null;
  } catch (error) {
    throw json({ error: "Error" }, { status: 500 });
  }
};

3. 处理包含数组的表单字段（如多选框） #

如果表单中有多选框这类返回数组值的字段，可以用formData.getAll()来处理：

export const action: ActionFunction = async ({ request }: ActionFunctionArgs) => {
  const formData = await request.formData();
  
  const formDataObj = Object.fromEntries(
    Array.from(formData.keys()).map(key => {
      const values = formData.getAll(key);
      // 多值返回数组，单值返回字符串，空值返回空字符串
      return [
        key,
        values.length > 1 
          ? values.map(v => (v ?? "") as string) 
          : (values[0] ?? "") as string
      ];
    })
  );

  try {
    // call api here
    return null;
  } catch (error) {
    throw json({ error: "Error" }, { status: 500 });
  }
};

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