Question

我正在尝试使用类似json的格式和materialUI组件构建React列表组件。我试图使用递归函数来构建组件，但它给出了一个错误：

transformed.js:23561 Uncaught TypeError: Cannot read property 'length' of null
at getStyles (transformed.js:23561)
at ListItem.render (transformed.js:23890)
at transformed.js:31579
at measureLifeCyclePerf (transformed.js:30859)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (transformed.js:31578)
at ReactCompositeComponentWrapper._renderValidatedComponent (transformed.js:31605)
at ReactCompositeComponentWrapper.performInitialMount (transformed.js:31145)
at ReactCompositeComponentWrapper.mountComponent (transformed.js:31041)
at Object.mountComponent (transformed.js:3565)
at ReactDOMComponent.mountChildren (transformed.js:35534)

以下是我尝试使用的功能：

listCreator = (listItems) => {
 let listOutput = null
 listOutput = listItems.map((listSubItem, index) =>
   <ListItem
     key = {index}
     primaryText = {listSubItem.primaryText ? listSubItem.primaryText : null}
     primaryTogglesNestedList = {listSubItem.primaryTogglesNestedList ? listSubItem.primaryTogglesNestedList : null}
     className = {listSubItem.className ? listSubItem.classname : null}
     nestedItems = {listSubItem.nestedItem ? this.listCreator(listSubItem.nestedItems) : null}
   />
 )
 console.log(listOutput)
 return(listOutput)
}

这是组件的状态：

this.state = {
  categoriesListItems:[
    {
      primaryText:"Item0",
      primaryTogglesNestedList:true,
      nestedItems:
      [{
        primaryText:"Item0Content",
        content: "Testing0...",
      }]
    },
    {
      primaryText:"Item1",
      primaryTogglesNestedList:true,
      nestedItems:
      [{
        primaryText:"Item1Content",
        content: "Testing1...",
      }]
    },
    {
      primaryText:"Item2",
      primaryTogglesNestedList:true,
      nestedItems:
      [{
        primaryText:"Item2Content",
        type: ListItem
      }]
    }
  ]
};

这是渲染功能：

render(){
 return(
   <List>
     {this.listCreator(this.state.categoriesListItems)}
   </List>
)}

以下是我的地图函数中的日志中返回的三个对象：

{primaryText: "Item0", primaryTogglesNestedList: true, nestedItems:Array(1)}
 nestedItems: Array(1)
  0: {primaryText: "Item0Content", content: "Testing0..."}
  length: 1
  __proto__ : Array(0)
 primaryText: "Item0"
 primaryTogglesNestedList: true
 __proto__: Object

{primaryText: "Item1", primaryTogglesNestedList: true, nestedItems:Array(1)}
 nestedItems: Array(1)
  0: {primaryText: "Item1Content", content: "Testing1..."}
  length: 1
  __proto__ : Array(0)
 primaryText: "Item1"
 primaryTogglesNestedList: true
 __proto__: Object

{primaryText: "Item2", primaryTogglesNestedList: true, nestedItems:Array(1)}
 nestedItems: Array(1)
  0: {primaryText: "Item2Content", content: type: ƒ}
  length: 1
  __proto__ : Array(0)
 primaryText: "Item2"
 primaryTogglesNestedList: true
 __proto__: Object

Answer 1

以下函数有效，因为我在nestedItems属性

中返回null而不是空列表

listCreator = (listItems, nested) => {
 let listOutput = null
  listOutput = listItems.map((listSubItem, index) =>
    <ListItem key = {index}
     primaryText = {listSubItem.primaryText ? listSubItem.primaryText : null}
     primaryTogglesNestedList = {listSubItem.primaryTogglesNestedList ? listSubItem.primaryTogglesNestedList : null}
     className = {listSubItem.className ? listSubItem.classname : null}
     nestedItems = {listSubItem.nestedItems ? this.listCreator(listSubItem.nestedItems, true) : []}
   />
 )
 return(listOutput)
}

无法在React组件中读取null的属性“length”

1 个答案: