У меня есть список с несколькими подсписками. Я представлял этот список в следующей структуре:
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 вырезает какую-то часть объекта?