Pagination Issue

[mafideju]

Olá Fernando, tudo bem?

Me chamo Márcio e sou aluno dos cursos Github (concluído) e React Ninja.

Tenho acompanhado o curso com o mesmo projeto desde o início e tenho conseguido resolver os principais problemas que têm surgido, mas estou com muitas dificuldades de acompanhar a seção de paginação do módulo 2. Normalmente eu assistiria tudo de novo, desde o princípio do componente, mas dessa vez queria saber como é ter uma ajudinha para resolver os problemas e se for possível você fornecer alguma idéia para esta situação ficarei muito agradecido.

O grande problema é que a paginação não carrega. Até aula 127 tudo funcionou razoavelmente bem (ainda que não consiga linterizar o arquivo webpack do storybook, mas OK entre outras pequenas diferenças), os testes estão passando, mas quando importo o componente surgem erros como (entre outros):

Warning: Failed prop type: Invalid prop `starred[0]` supplied to `AppContent`.

Uncaught (in promise) TypeError: Cannot read property 'replace' of undefined

Warning: Failed prop type: Invalid prop `repos[0]` supplied to `Repos`.

Warning: Failed prop type: Invalid prop `repos[0]` supplied to `AppContent`.

O componente não quebra mas também não funciona. Quando comento o componente, volta a funcionar. Fiz e refiz as Prop Types mas não obtive sucesso. Não estou conseguindo debuggar, não vai pra frente, nem pra trás. Ainda que não pareça bicho de sete cabeças, travei. Help.

@fdaciuk

[mafideju]

Se puder dar uma olhada: https://github.com/mafideju/CacadorPerfisGitHubAPIReact

[fdaciuk]

Oi @mafideju! Legal, claro que ajudo! Vou olhar seu código e já volto com o feedback :D

[fdaciuk]

Oi @mafideju! Vamos lá: existem alguns problemas na sua aplicação, mas vamos resolver primeiro os que impedem a aplicação de funcionar. Vamos analisar as mensagens:

Warning: Failed prop type: Invalid prop `starred[0]` supplied to `AppContent`.

Essa primeira mesagem é um warning (aviso). Ela diz que uma prop inválida foi passada para o AppContent, no caso a prop starred, onde foi tentado pegar o primeiro item desse array, com [0].

Por que deu erro?

Veja como está a validação (prop types) no componente AppContent:

  repos: PropTypes.arrayOf(
    PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
    ]),
  ),

Perceba que você usou oneOfType, para dizer que tipos de itens devem estar dentro esse array. O problema é que, ao usar onOfType, o React vai esperar ao menos um item no array. Como o seu array, inicialmente, é passado vazio, ele dá esse erro.

Outro problema é que esse array não é um array de strings, ou números, como você passou, e sim um array de objetos. Na dúvida, use só PropTypes.array, que ele vai exibir um warning se essa prop não for passada como array :)

Vamos para a próxima mensagem:

Uncaught (in promise) TypeError: Cannot read property 'replace' of undefined

Uncaught (in promise) significa que você tem alguma promise que não foi tratada o catch dela (quando acontece um erro. E nesse caso, realmente aconteceu.

Para descobrir onde aconteceu esse erro, é preciso ver onde você usou esse método replace. Em teoria, você estaria usando esse método em uma string, mas essa propriedade onde você está tentando usar o replace está vindo como undefined.

Os outros warnings são a mesma ideia do primeiro que eu já comentei. Só olhar o componente que você vai ver onde precisar ajustar :)

---

Veja que o problema nem é na paginação em si, mas antes dela ser chamada :)

Existem outros problemas ali, mas resolva esses, que eu vou te ajudando a resolver os próximos, se você não conseguir ok? :)

Me deixe saber se você entendeu, e se conseguiu prosseguir com a sua aplicação :)

[mafideju]

Antes de mais nada, muito obrigado pela atenção @fdaciuk . Tenho pouco mais de seis meses de experiência trabalhando sozinho e a falta de alguém mais experiente realmente não ajuda muito.

Consegui remover os warnings (embora não sei se fiz certo, embora os warning não estouram mais), mas não estou usando nenhuma promise na frente, deve ser algum processo do framework ocorrendo em background, não tenho ainda razoável expertise em debugging, não consegui andar nesse sentido. Pelo meu debug o erro está ocorrendo na linha 23 do src/components/Pagination/index.js que consome a prop pageLink que não está vindo de lugar nenhum, apenas do storybook pageLink="http://localhost:7711/%page%", acredito que vem daí o undefined, acho que ela precisa vir do componente, mas no componente Page ela também é apenas consumida. Mas quanto mais mexo, parece que fica pior! :|

[fdaciuk]

Oi @mafideju! Atualize o seu projeto aqui no GitHub, que eu baixo novamente pra ver exatamente quais erros estão ocorrendo, e te dou um caminho a seguir, pode ser? :)

[mafideju]

Sim,@fdaciuk, bug commitado! (ih)

[fdaciuk]

Oi @mafideju! Já vi aqui seu código! Ainda tem alguns warnings a resolver (a maioria dele é por conta do ponto e vírgula). Mas vi que você está usando o standard e o eslint juntos. Não existe essa necessidade: o standard usa o eslint por baixo dos panos.

Então, defina apenas um linter para usar no seu projeto, e defina as regras que eles devem seguir, ok?

Agora vamos ao seu problema:

Veja que o componente Pagination espera uma prop chamada pageLink, e ele espera que essa prop seja uma string, correto? Logo, você tem que fazer uma das duas coisas:

• ou você sempre passa essa prop quando for usar o componente Pagination;
• ou você usa o defaultProps para dizer que, se pageLink for undefined, ele deve receber uma string vazia.

Dessa forma, você não vai mais ter o erro com o replace, já que sempre vai receber uma string :)

Ficou claro? :)

[mafideju]

Ok, entendi sim. O linter estava sendo uma fonte de muitas experiências, essa é a sexta configuração que uso, mas vou dropar meu config e usar o standard para aprender uma outra forma de linterizar o código, realmente não fazia idéia que era o standard que estava causando essa enxurrada de warnings!! E todos eles estavam vindos apenas de um folder: o ./utils.

Sobre o replace até que tinha uma noção, mas não consegui resolver. Isso ás vezes é meio frustrante, pois tenho chegado perto de alguns problemas mas não consigo resolver. Fiz o que foi indicado e o erro não acontece mais.

Não imaginava que as prop types pudessem causar tantos problemas, vou ficar mais atento à elas agora em diante.

Nessa caminhada descobri que o source-map não estava funcionando pois estava declarado como devtools, quando na verdade é devtool. Agora tá melhor pra debuggar.

Mano, foi minha primeira issue, sou quem deve fecha-la? Ou é melhor deixar aberto? Ou você mesmo pode fazer isso?

Muitissimo obrigado pela ajuda, cê é MONSTRÃO mesmo.

@fdaciuk

[fdaciuk]

Oi @mafideju! Na verdade o problema não é o prop types. Ele serve apenas para que você defina uma tipagem estática para as props do seu componente. Dessa forma, se o seu componente estiver recebendo alguma prop diferente da que foi configurada, ele vai te avisar, com um warning :)

O problema mesmo não ter definido a prop como default, já que era esperado uma string, mas ela estava vindo como undefined :)

De qualquer forma, fique super tranquilo. Isso pode acontecer no começo mesmo. Com o tempo e prática, você vai pegando essas coisas, e não vai deixar acontecer novamente :)

Sobre fechar a issue, se você perceber que o problema foi resolvido, pode fechar, sem problemas :)

De tempos em tempos eu dou uma "limpada" por aqui, e vou fechando as que estão abertas sem resposta, mas sempre perguntando se o(a) aluno(a) realmente conseguiu resolver o problema.

Ainda que a issue esteja fechada, mas se você perceber que ainda tem o mesmo problema, pode comentar na mesma issue que eu vou respondendo igual, sem problemas, ok? :)

E fique à vontade para perguntar sempre que tiver dificuldades. Estou à disposição para ajudar você a chegar no nível Ninja :D