我有一个包含多个子列表的列表。我将此列表表示为以下结构:
export class DisclosureItem {
constructor(public key: string,
public name: string,
public label: string,
public isRoot: boolean,
public subItems: DisclosureItem[],
public isOpen: boolean = true) { }
}
但是在构建组件时,我注意到以下代码:
const ListItem = ({ item }: { item: DisclosureItem }) => {
console.log("BUILDING ITEM " + JSON.stringify(item))
const [itemState, setItemState] = useState({...item})
console.log("STATE ITEM " + JSON.stringify(itemState))
...
}
第一个打印的项目比第二个项目具有更深的对象。由于某些我无法理解的原因,item
的第二个子项目丢失了。
下面是两张照片的结果
第一次打印
{
"key":"0.32036015340682367",
"name":"www.pucrs.br",
"label":"www.pucrs.br",
"isRoot":true,
"subItems":[
{
"key":"0.2465917583376127",
"name":"estudenapucrs",
"label":"estudenapucrs",
"isRoot":false,
"subItems":[
{
"key":"0.34830672476436564",
"name":"cursos",
"label":"cursos",
"isRoot":false,
"subItems":[
],
"isOpen":true
}
],
"isOpen":true
},
{
"key":"0.1656520722355992",
"name":"estudenapucrs-prov",
"label":"estudenapucrs-prov",
"isRoot":false,
"subItems":[
{
"key":"0.2891782788886017",
"name":"wp-content",
"label":"wp-content",
"isRoot":false,
"subItems":[
{
"key":"0.4856445920827279",
"name":"themes",
"label":"themes",
"isRoot":false,
"subItems":[
{
"key":"0.46072939208333685",
"name":"estudenapucrs_v3",
"label":"estudenapucrs_v3",
"isRoot":false,
"subItems":[
{
"key":"0.1276111793891639",
"name":"src",
"label":"src",
"isRoot":false,
"subItems":[
{
"key":"0.7482609650311476",
"name":"img",
"label":"img",
"isRoot":false,
"subItems":[
{
"key":"0.37872290603732317",
"name":"favicon.png",
"label":"favicon.png",
"isRoot":false,
"subItems":[
],
"isOpen":true
}
],
"isOpen":true
}
],
"isOpen":true
}
],
"isOpen":true
}
],
"isOpen":true
}
],
"isOpen":true
}
],
"isOpen":true
}
],
"isOpen":true
}
第二次打印
{
"key":"0.45223409196660724",
"name":"www.pucrs.br",
"label":"www.pucrs.br",
"isRoot":true,
"subItems":[
{
"key":"0.3817622605191129",
"name":"estudenapucrs",
"label":"estudenapucrs",
"isRoot":false,
"subItems":[
{
"key":"0.2632789989456754",
"name":"cursos",
"label":"cursos",
"isRoot":false,
"subItems":[
],
"isOpen":true
}
],
"isOpen":true
}
],
"isOpen":false
}
在useState
函数中存储大对象是一种不好的做法吗?另外,React会切掉对象的某些部分吗?