Maximum call stack size exceeded Circular Reference Error, nested custom menu
@kapa.ai Uncaught RangeError: Maximum call stack size exceeded.
const { SubMenu } = Menu;
const { useToken } = theme;
export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
Title: TitleFromProps,
render,
Expand
message.txt
9 KB
@kapa.ai Uncaught RangeError: Maximum call stack size exceeded. This happen at children.length > 0
const RenderToTitle = TitleFromProps ?? TitleFromContext ?? ThemedTitleV2;
const customMenuItems = [
{
key: "parent",
label: "Parent",
route: "/parent",
icon: <DashboardOutlined />,
name: "parent",
children: [
{
key: "child",
label: "Child",
route: "/child",
icon: <DashboardOutlined />,
name: "child",
children: [],
},
],
},
];
const renderTreeView = (tree: ITreeMenu[], selectedKey?: string) => {
const mergedMenuItems = [...customMenuItems, ...tree];
return mergedMenuItems.map((item: ITreeMenu) => {
const {
icon,
label,
route,
key,
name,
children,
parentName,
meta,
options,
} = item;
if (children.length > 0) {
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
action="list"
params={{
resource: item,
}}
>
<SubMenu
key={item.key}
icon={icon ?? <UnorderedListOutlined />}
title={label}
>
{renderTreeView(children, selectedKey)}
</SubMenu>
</CanAccess>
);
}
const { SubMenu } = Menu;
const { useToken } = theme;
export const ThemedSiderV2: React.FC<RefineThemedLayoutV2SiderProps> = ({
Title: TitleFromProps,
render,
Expand
message.txt
9 KB
@kapa.ai Uncaught RangeError: Maximum call stack size exceeded. This happen at children.length > 0
const RenderToTitle = TitleFromProps ?? TitleFromContext ?? ThemedTitleV2;
const customMenuItems = [
{
key: "parent",
label: "Parent",
route: "/parent",
icon: <DashboardOutlined />,
name: "parent",
children: [
{
key: "child",
label: "Child",
route: "/child",
icon: <DashboardOutlined />,
name: "child",
children: [],
},
],
},
];
const renderTreeView = (tree: ITreeMenu[], selectedKey?: string) => {
const mergedMenuItems = [...customMenuItems, ...tree];
return mergedMenuItems.map((item: ITreeMenu) => {
const {
icon,
label,
route,
key,
name,
children,
parentName,
meta,
options,
} = item;
if (children.length > 0) {
return (
<CanAccess
key={item.key}
resource={name.toLowerCase()}
action="list"
params={{
resource: item,
}}
>
<SubMenu
key={item.key}
icon={icon ?? <UnorderedListOutlined />}
title={label}
>
{renderTreeView(children, selectedKey)}
</SubMenu>
</CanAccess>
);
}
