Conform项目中使用parseWithZod解析FormData数组的最佳实践

在Conform项目中处理表单数据时，开发者经常会遇到需要解析包含数组数据的FormData的情况。本文将通过一个典型场景，深入探讨如何正确使用parseWithZod方法来处理FormData中的数组数据。

问题背景

当开发者尝试通过FormData发送一个字符串数组时，常见的做法是使用JSON.stringify将数组序列化为字符串：

formData.set('classifications', JSON.stringify(['foo','bar','baz']))

然后在服务器端(如Remix action)使用parseWithZod配合Zod模式进行解析：

const submission = parseWithZod(formData, {
  schema: z.object({
    classifications: z.array(z.string().nullable()),
    datasetId: z.string(),
  }),
});

常见误区与问题

许多开发者期望上述代码能直接将JSON字符串反序列化为数组，但实际结果却出乎意料：

{
  "classifications": [
    "[\"foo\",\"bar\",\"baz\"]"
  ]
}

可以看到，解析结果中的数组实际上包含了一个字符串元素，而不是预期的三个独立字符串元素。这是因为FormData.set()方法直接将整个JSON字符串作为一个值存储，而不是将其拆分为多个值。

正确解决方案

方案一：使用FormData.append()方法

正确的做法是使用FormData.append()方法逐个添加数组元素：

formData.append('classifications', 'foo');
formData.append('classifications', 'bar');
formData.append('classifications', 'baz');

这样，FormData会为同一个键存储多个值，parseWithZod就能正确解析为字符串数组。

方案二：自定义预处理

如果确实需要发送JSON字符串，可以在Zod模式中添加预处理转换：

const schema = z.object({
  classifications: z.string().transform(val => JSON.parse(val)),
  datasetId: z.string(),
});

技术原理

FormData的工作机制决定了它处理数组数据的方式。当使用set()方法时，它会覆盖同名键的已有值；而使用append()方法则会追加新值到同名键下。parseWithZod正是基于这种机制来识别数组数据的。

最佳实践建议

1. 对于简单数组，优先使用append()方法逐个添加元素
2. 对于复杂数据结构，考虑使用JSON序列化并结合Zod的transform预处理
3. 在前后端约定好数据格式，确保解析逻辑一致
4. 对于大型数组，考虑性能影响，可能需要分块处理

通过理解FormData和parseWithZod的工作原理，开发者可以更有效地处理表单中的数组数据，避免常见的解析错误。