Question

我想在React中使用Material-UI中的List，其中列表也有嵌套项。我有这样的代码：

<List>
    {this.state.categories.map(category => {
        return (
            <ListItem key={category.categoryID} 
                      primaryText={category.name}
                      nestedItems={[
                          category.subcategories.map(subcat => {
                              return (
                                  <ListItem key={subcat.subcatID}
                                            primaryText={subcat.name} />
                              )
                          })
                      ]} />
        )
    })}
</List>

问题是虽然这段代码有效但我看到所有内容都显示出来，但我在控制台中出错了。我得到的错误与标题中的错误相同。我认为问题在于nestedItem每个ListItem需要用逗号分隔，但是如果我在代码中的最后一个ListItem之后放一个逗号，我得到的语法错误。知道如何解决这个问题吗？

Answer 1

由于map返回一个数组，因此有一个多余的数组：

    <ListItem key={category.categoryID} 
              primaryText={category.name}
              nestedItems={ //here no need an array. This will be nestedItems=[[]]
                  category.subcategories.map(subcat => {
                      return (
                          <ListItem key={subcat.subcatID}
                                    primaryText={subcat.name} />
                      )
                  })
              } />

提供给`ListItem`的`array`类型的nestedItems [0]期望一个ReactElement

1 个答案: