Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Menu não funciona usando o map()

eu tenho o seguinte cenário abaixo e quando o componente renderiza o menu não funciona, é como se o javascript de controle não fosse aplicado a ele ( estou usando arquivos js baixados na net de um layout já pronto e importando direto no index.html). Se eu retiro o this.menu.map e coloco o meu direto no código o menu funciona corretamente. Já não sei mais o que faço. Alguém pode me ajudar?

componentWillMount() {
    //faço a chamada da api que gera um dispatch na store e gera o render do component container;
}

render() return (
{
                            this.menu.map(() => (
                                <li className="">
                                    <a href="#"><i className="fa fa-sitemap fa-fw"></i> Teste<span className="fa arrow"></span></a>
                                    <ul className="nav nav-second-level collapse" aria-expanded="false" style={{ 'height': '0px' }}>
                                        <li>
                                            <a href="#">Second Level Item</a>
                                        </li>
                                        <li>
                                            <a href="#">Second Level Item</a>
                                        </li>
                                        <li>
                                            <a href="#">Third Level <span className="fa arrow"></span></a>
                                            <ul className="nav nav-third-level collapse">
                                                <li>
                                                    <a href="#">Third Level Item</a>
                                                </li>
                                                <li>
                                                    <a href="#">Third Level Item</a>
                                                </li>
                                                <li>
                                                    <a href="#">Third Level Item</a>
                                                </li>
                                                <li>
                                                    <a href="#">Third Level Item</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            ))
                        });
3 respostas

Oi Elias, esse é um caso mais complicado. Dá algum erro no console? conferiu se todos os arquivos que você colocou no index.html estão realmente sendo baixados no navegador?

Oi Alberto,

Não dá nenhum erro no console, e na aba Sources do navegador todos arquivos js importados no index.html estão lá.

O que descobri foi o seguinte se o Menu é renderizado ao mesmo tempo que o controle o Menu funciona, se tiver um pequeno delay ele não funciona, é como se o js responsável pelo funcionamento do menu não se aplica-se a ele. Ou seja o objeto que servirá para montar o menu é obtido de um dispatch através de uma api, se eu substituo a chamada da Api por um objeto pronto e instantâneo o Menu funciona. Se eu deixo chamando a Api que causa um delay de alguns milissegundos não funciona mais.

Se eu coloco um item do Menu fixo no código e outro sendo obtido pela Api, o fixo funciona e obtido pela Api não funciona. E analisando o HTML gerado não tem nenhuma diferença entre eles.

Tem alguma ideia? Se quiser posto o projeto em algum lugar se puder dar uma olhada. Já estou a 3 dias nisso não consigo evoluir.

solução!

Encontrei o problema. Só não sei o por que isso acontece. Eu fiz um teste no site onde peguei o template que estou usando. Usando a Devtools do browser copie e colei um novo item do menu diretamente no inspetor do HTML e o que aconteceu? Ele não funciona. Mais perai, deveria funcionar senão elementos que são renderizados parcialmente na tela não funcionariam. Então fiz o mesmo teste com outro template e funcionou certinho. Ainda não teste no React mais com certeza vai funcionar agora, pois o problema não é o React. Resumindo acredito que seja algum "bug" na forma com o javascript do template foi escrito.