0 
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

这是错误

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

4

1 回答 1

0

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

return recursos[0].recursos.map((item) => {...code...})
于 2020-08-18T14:44:06.807 回答