useState是否具有最大深度?

时间:2020-04-19 00:38:52

标签: reactjs use-state

我有一个包含多个子列表的列表。我将此列表表示为以下结构:

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会切掉对象的某些部分吗?

0 个答案:

没有答案