У useState есть максимальная глубина? - PullRequest
0 голосов
/ 19 апреля 2020

У меня есть список с несколькими подсписками. Я представлял этот список в следующей структуре:

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 вырезает какую-то часть объекта?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...