Remix Run中useFetcher提交数组转字符串问题求助

当你用useFetcher提交包含数组的对象时，Remix会默认把数组转成逗号分隔的字符串（因为表单数据处理逻辑会调用数组的toString()方法）。下面给两种实用的解决方式：

方法一：提交JSON字符串 #

前端把数组转成JSON字符串再提交，后端解析回数组：

// 前端提交代码
const fetcher = useFetcher();
const deleteSelected = () => {
  const selected_ids = [1,2,3,4]; 
  fetcher.submit(
    { ids: JSON.stringify(selected_ids) }, 
    { method: "post", action: "/api/delete" }
  );
}    

// api/delete action 处理代码
export async function action({ request }) {
  let formData = await request.formData();
  let ids = JSON.parse(formData.get("ids"));
  console.log(ids); // 输出 [1,2,3,4]
}

方法二：手动构建FormData添加数组项 #

利用FormData支持同名多字段的特性，多次append同一个key，后端用getAll获取完整数组：

// 前端提交代码
const fetcher = useFetcher();
const deleteSelected = () => {
  const selected_ids = [1,2,3,4]; 
  const formData = new FormData();
  selected_ids.forEach(id => formData.append("ids", id));
  fetcher.submit(formData, { method: "post", action: "/api/delete" });
}    

// api/delete action 处理代码
export async function action({ request }) {
  let formData = await request.formData();
  let ids = formData.getAll("ids").map(Number); // 转成数字类型，按需调整
  console.log(ids); // 输出 [1,2,3,4]
}

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