Json 物料Ui自定义树在放置DB数据时不显示，但使用手动输入

我使用react js作为前端，Django作为后端。我从树状结构的数据库中获取数据，并将其显示在材质ui树状视图中。我通过记录一个数据来检查，它正在打印一个数据，但没有显示一个树

react js代码

import React，{useState，useffect}来自“React”；
从“道具类型”导入道具类型；
从“@material ui/core/SvgIcon”导入SvgIcon；
从'@material ui/core/styles'导入{fade，makeStyles，withStyles}；
从“@material ui/lab/TreeView”导入TreeView；
从“@material ui/lab/TreeItem”导入TreeItem；
从“@material ui/core/Collapse”导入折叠；
从“react spring/web.cjs”导入{useSpring，动画}；//IE 11支持需要web.cjs
功能方块（道具）{
返回(
{/*tslint:禁用下一行：最大行长度*/}
);
}
功能加方（道具）{
返回(
{/*tslint:禁用下一行：最大行长度*/}
);
}
功能关闭广场（道具）{
返回(
{/*tslint:禁用下一行：最大行长度*/}
);
}
功能转换组件（道具）{
const style=useSpring({
from:{opacity:0，transform:'translate3d（20px，0,0）}，
到：{opacity:props.in？1:0，transform:`translate3d（${props.in？0:20}px，0,0）`，
});
返回(
);
}
TransitionComponent.propTypes={
/**
*显示组件；触发进入或退出状态
*/
在：PropTypes.bool中，
};
const StyledTreeItem=带有样式（（主题）=>({
iconContainer：{
“&.close”：{
不透明度：0.3，
},
},
组：{
边缘左：7，
paddingLeft:18，
borderLeft:`1px虚线${fade（theme.palete.text.primary，0.4）}`，
},
}))（（道具）=>）；
const useStyles=makeStyles({
根目录：{
身高：264，
flexGrow:1，
最大宽度：400，
},
});
导出默认功能CustomizedTreeView（道具）{
const{course}=props；
const classes=useStyles（）；
const[data，setData]=useState（[]）
useffect（（）=>{
setData（课程）
},[])
/*eslint不禁用未使用的表达式*/
const makeTree=data=>{}
返回(
{console.log（“data”，data）}
{/*{makeTree（课程）}*/}
{data.map（（项目，索引）=>{
{console.log（“item”，item.category_name）}
})}
);
}

import React，{useState，useffect}来自“React”；
从“道具类型”导入道具类型；
从“@material ui/core/SvgIcon”导入SvgIcon；
从'@material ui/core/styles'导入{fade，makeStyles，withStyles}；
从“@material ui/lab/TreeView”导入TreeView；
从“@material ui/lab/TreeItem”导入TreeItem；
从“@material ui/core/Collapse”导入折叠；
从“react spring/web.cjs”导入{useSpring，动画}；//IE 11支持需要web.cjs
功能方块（道具）{
返回(
{/*tslint:禁用下一行：最大行长度*/}
);
}
功能加方（道具）{
返回(
{/*tslint:禁用下一行：最大行长度*/}
);
}
功能关闭广场（道具）{
返回(
{/*tslint:禁用下一行：最大行长度*/}
);
}
功能转换组件（道具）{
const style=useSpring({
from:{opacity:0，transform:'translate3d（20px，0,0）}，
到：{opacity:props.in？1:0，transform:`translate3d（${props.in？0:20}px，0,0）`，
});
返回(
);
}
TransitionComponent.propTypes={
/**
*显示组件；触发进入或退出状态
*/
在：PropTypes.bool中，
};
const StyledTreeItem=带有样式（（主题）=>({
iconContainer：{
“&.close”：{
不透明度：0.3，
},
},
组：{
边缘左：7，
paddingLeft:18，
borderLeft:`1px虚线${fade（theme.palete.text.primary，0.4）}`，
},
}))（（道具）=>）；
const useStyles=makeStyles({
根目录：{
身高：264，
flexGrow:1，
最大宽度：400，
},
});
导出默认功能CustomizedTreeView（道具）{
const{course}=props；
const classes=useStyles（）；
const[data，setData]=useState（[]）
useffect（（）=>{
setData（课程）
},[])
/*eslint不禁用未使用的表达式*/
const makeTree=data=>{}
返回(
{console.log（“data”，data）}
{/*{makeTree（课程）}*/}
{data.map（（项目，索引）=>{
{console.log（“item”，item.category_name）}
返回(
)
})}
);
}