Ant Design Form.List转JSON遇循环结构错误及SyntheticBaseEvent问题

这个错误是因为表单values里混入了React的SyntheticBaseEvent（合成事件对象），该对象包含循环引用（比如关联到window对象），导致JSON.stringify无法处理。通常是提交表单时误把事件对象添加到了表单数据里，比如在状态更新时错误地将事件参数e合并进了values。

1. 修正表单字段更新逻辑 #

先检查代码里的状态更新部分，避免把整个事件对象塞进表单状态：

• 错误写法示例：

const handleInputChange = (e) => {
  // 错误：把整个事件对象赋值给了字段
  setValues({ ...values, [e.target.name]: e }); 
};

• 改成正确的取值方式：

const handleInputChange = (e) => {
  setValues({ ...values, [e.target.name]: e.target.value }); 
};

2. 手动清理混入的事件字段 #

如果values里已经存在SyntheticBaseEvent相关字段，提交前手动删除：

const handleSubmit = (e) => {
  e.preventDefault();
  // 移除事件相关字段（根据实际字段名调整，比如e、event）
  const cleanedValues = { ...values };
  delete cleanedValues.e;
  delete cleanedValues.event;
  // 现在可以正常转JSON
  const jsonData = JSON.stringify(cleanedValues);
};

3. 表单库使用规范（若用了第三方库） #

• React Hook Form：确保提交时只取data参数，不要额外传递事件对象：

const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
  // data里不会包含事件对象，直接转换即可
  const jsonData = JSON.stringify(data);
};

• Formik：提交时直接用Formik提供的values，不要混入事件参数：

<Formik
  initialValues={initialValues}
  onSubmit={(values) => {
    const jsonData = JSON.stringify(values);
  }}
>
  {/* 表单内容 */}
</Formik>

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