用对象数组（树）形成地图答案

【问题标题】：Forming map with array of objects (tree)用对象数组（树）形成地图
【发布时间】：2023-03-06 06:27:01
【问题描述】：

export default function ListaGrupos({ match }) {
  const classes = useStyles();
  const [loading, setLoading] = useState(false);
  const [recursos, setRecursos] = useState([])

  useEffect(() => {
    setLoading(true)
    RecursosBusiness.arvoreRecursos((res, err) => {
      if (!err) {
        setRecursos(res)
        setLoading(false)
        console.log(res)
      }
    })

    return () => {
      console.log("Limpeza")
    }
  }, [])

  if(loading) return <span>Carregando...</span>

上面是我的代码，其中资源常量是我的数组

[{…}]
  0:
   id: 1
   identificador: "sistema_acs"
   nome: "ACS"
   recursos: Array(1)
    0:
    id: 2
    identificador: "modulo_seguranca"
    nome: "Segurança"
    pai: {id: 1}
    recursos: Array(2)
     0: {id: 3, identificador: "gestao_usuarios", nome: "Gestão de Usuários", tipo: 
     "funcionalidade", pai: {…}, …}
     1:
      id: 4
      identificador: "gestao_grupos"
      nome: "Gestão de Grupos"
      pai: {id: 2}
      recursos: Array(1)
       0: {id: 5, identificador: "gestao_grupos_criar_grupo", nome: "Criar Grupo", tipo: 
       "funcionalidade", pai: {…}, …}

我想访问树的其他元素

{recursos.recursos.map((item) => {
          return (
            <Card className={classes.root} variant="outlined" key={item.id}>
              <CardContent className='col-10'>
                <Typography variant="h5" component="h3">
                  {item.nome}
                </Typography>
              </CardContent>
              <div className='d-flex justify-content-center align-items-center col-2'>
                <Link to={`/app/seguranca/grupos/editar`}>
                  <Tooltip className="d-inline-block" id="tooltip-bottom" title='Editar' placement="bottom">
                    <EditSharp variant="contained" style={{ cursor: 'pointer' }} />
                  </Tooltip>
                </Link>
              </div>
            </Card>
          )
        })}

但是我上面使用的代码返回一个我无法识别的错误，如果有人可以帮助我，谢谢

TypeError: Cannot read property 'map' of undefined

这是错误

当我尝试深入树中提取更多功能时，会显示此错误，我已经研究过了，但我无法确定来源

【问题讨论】：

看起来recursos 是数组？在这种情况下，它们将没有 .recursos 属性，您需要从数组中选择一个项目才能看到它，例如recursos[0].recursos
@Ruan Duarte 但你必须在每个递归内部进行迭代（即嵌套到另一个递归......）对吗？
请不要以控制台输出格式提供数据。提供有效的 JavaScript 语法。

标签： javascript arrays json reactjs

【解决方案1】：

试试这个（仅推荐用于上述场景）

return recursos[0].recursos.map((item) => {...code...})

【讨论】：