🐛[BUG] protable 点击设置

Something went wrong.
Converting circular structure to JSON --> starting at object with constructor 'FiberNode' | property 'stateNode' -> object with constructor 'HTMLDivElement' --- property '__reactFiber$flvkei3z9d9' closes the circle
`import type {ActionType} from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
ProColumns,
ProDescriptions,
ProDescriptionsItemProps,
ProTable,
} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {Avatar, Button, Drawer, Switch} from 'antd';
import React, {useRef, useState} from 'react';
import {API} from "@/services/ant-design-pro/typings";
import {useAccess} from "@@/exports";
import {DeleteFilled} from "@ant-design/icons";
import {upsetUser} from "@/pages/Account/config/api/upsetUser";
import UserUpdateForm from "@/pages/Account/components/UpdateForm";
import {removeUser} from "@/pages/Account/config/api/removeUser";
import {getUser} from "@/pages/Account/config/api/getUser";
import AssignForm from "@/pages/Account/components/AssignForm";
import {getFileByUuId} from "@/pages/Account/config/api/getFileByUuId";

const TableList: React.FC = () => {

const [showDetail, setShowDetail] = useState(false);
const actionRef = useRef();
const [currentRow, setCurrentRow] = useState();
const [selectedRowsState, setSelectedRows] = useState([]);
const access = useAccess(); // access 实例的成员: canReadFoo, canUpdateFoo, canDeleteFoo
const intl = useIntl();

const columns: ProColumns[] = [
{
title: (

),
dataIndex: 'name',
align: 'center',
render: (dom, entity) => {
return (
{
setCurrentRow(entity);
setShowDetail(true);
}}
>
{dom}

);
},
},
{
title: (

),
dataIndex: 'avatar',
align: 'center',
valueType: 'avatar',
hideInSearch: true,
render: (text, record) => {
let res = getFileByUuId(record.avatar)

// text是当前单元格的值，record是当前行的数据
return
},
},
{
title: (

),
dataIndex: 'email',
valueType: 'email',
align: 'center',
hideInSearch: true
},
{
title: (

),
dataIndex: 'phone',
align: 'center',
hideInSearch: true
},
{
title: ,
dataIndex: 'enable',
align: 'center',
valueType: "switch",
hideInSearch: true,
render: (text, record) => {
// text是当前单元格的值，record是当前行的数据
return }
unCheckedChildren={}
checked={record.enable}
onChange={async (checked) => {
console.log("record", record);
await upsetUser({...record, enable: checked});
actionRef.current?.reload();
}}
/>;
},
},
{
title: ,
dataIndex: 'status',
align: 'center',
valueType: "select",
hidden: true,
initialValue: "ALL",
valueEnum: {
ALL: {
text: (

),
status: 'ALL',
},
ON: {
text: (

),
status: 'ON',
},
OFF: {
text: (

),
status: 'Default',
},
},
},

{
title: (

),
dataIndex: 'updateAt',
valueType: 'date',
align: 'center',
hideInSearch: true,
},
{
title: ,
dataIndex: 'option',
valueType: 'option',
hidden: !access.upsetUser,
render: (_, record) => [
<>

],
},
];

return (


headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
defaultMessage: 'Enquiry form',
})}
actionRef={actionRef}
rowKey="id"
search={{
labelWidth: 120,
}}
expandable={{
indentSize: 20, // 缩进的大小，单位为 px
childrenColumnName: 'children', // 子节点的属性名称
}}
options={
{fullScreen: true, setting: true}
}
toolBarRender={() => [

]}
pagination={{
defaultPageSize: 2
}}
request={getUser}
columns={columns}
rowSelection={{
checkStrictly: false, // 设置为 true 以禁用父子节点关联选择
onChange: (_, selectedRows) => {
console.log(selectedRows, selectedRows)
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (

{' '}
{selectedRowsState.length}{' '}

  

}
>
}
onClick={async () => {
await removeUser(selectedRowsState);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}}
>



)}

{
setCurrentRow(undefined);
setShowDetail(false);
}}
closable={false}
>
{currentRow?.name && (

column={2}
title={currentRow?.name}
request={async () => ({
data: currentRow || {},
})}
params={{
id: currentRow?.name,
}}
columns={columns.map(column => {
// 如果您想要在Drawer中禁用特定的列，可以在这里进行修改
if (column.dataIndex === 'enable') {
return {
title: ,
dataIndex: 'enable',
hideInSearch: true,
align: 'center',
valueEnum: {
true: {
text: (

),
status: 'Success',
},
false: {
text: (

),
status: 'Error',
},
},
}
}
return column as ProDescriptionsItemProps[];
})}
/>
)}


);
};

export default TableList;
`

Start by reproducing the error in the provided TableList component, focusing on ProTable's options setting and the browser console message about circular JSON. Trace the setting-panel interaction into the ProTable implementation and confirm that clicking the setting control no longer attempts to serialize a circular React object.

Written by the indexing model from the issue text.