当使用 Ant Design Form 组件库中的 Form.List 功能时,如果在列表子项中嵌套了对象并且该对象存在循环引用的情况下,会出现将循环结构转换为 JSON 的问题,具体表现为无限循环导致栈溢出。
解决方法是通过手动序列化和反序列化,将循环引用的对象转换为引用标识,避免直接将对象序列化为 JSON 导致的循环引用问题。以下是一个示例代码:
import { Form, Input, Button } from 'antd'
import { stringify } from "flatted";
function App() {
const [form] = Form.useForm();
const [data, setData] = useState([]);
const onFinish = (values) => {
console.log(values);
};
const handleSave = () => {
const values = form.getFieldsValue();
const stringifiedValues = stringify(values);
setData(JSON.parse(stringifiedValues));
};
return (
{(fields, { add, remove }) => (
<>
{fields.map((field) => (
))}
>
)}
);
}
在这个示例代码中,使用了 flatted 库中的 stringify 方法,将循环引用的对象转换为引用标识,以避免直接将对象序列化为 JSON 导致的循环引用问题。