[REACT] Bug ao mostrar os repositórios. Aula 03 - React Intermediário

Estou com um problema para conseguir mostrar os repositórios.
Quando pesquiso pelo usuário ele redireciona para a página de repositórios, mas vai vazia.
Quando tiro a parte do código que imprime os repositórios e deixo qualquer outra coisa escrita, funciona.
Mas o bug é que se eu manter essa página aberta e alterar o código e devolver a impressão dos repositórios, eles aparecem lá.

PS: Como não entendi a estilização do código, eu fiz do meu jeito.
Meu Home:

import React, { useState } from 'react';
import axios from 'axios';
import css from './style.css';
import { useNavigate } from 'react-router-dom';


function App(props) {
  const navigate = useNavigate();
  const [usuario, setUsuario] = useState('');

  function handlePesquisa(){
    axios.get(`https://api.github.com/users/${usuario}/repos`).then(response =>{
      const repositories = response.data;
      const repositoriesName = [];
      repositories.map((repository)=> {
        repositoriesName.push(repository.name);
      });
      localStorage.setItem('repositoriesName', JSON.stringify(repositoriesName));
      navigate('/repositories');
    });
  }

  return (
    //fragment: <> tag vazia, para não usar div pra conter os elementos
    <main className='container'> 
      <input className='usuarioInput' placeholder='Usuário' value={usuario} onChange={e => setUsuario(e.target.value)}/>
      <button type="button" className='btn' onClick={handlePesquisa}>Pesquisar</button>
    </main>
  );
}
export default App;

Meu Repositorio:

import React, { useEffect, useState } from "react";
//  { useEffect } para transicao de paginas
//  { useState } para lidar com estados

export default function Repositories(){
    const [ repositories, setRepositories ] = useState({});

    useEffect(()=>{
        let repositoriesName = localStorage.getItem('repositoriesName');
        repositoriesName = JSON.parse(repositoriesName);
        if(repositoriesName){
            setRepositories(repositoriesName);
        }
       
        localStorage.clear();
    }, []);

    return(
        <>
            <h1 className="titulo">Repositórios</h1>
            <ul className="repo">
                    { repositories.map(repository => {
                        return(
                            <li>Repositório: { repository }</li>
                        )
                    }) }
            </ul>                           
        </>
    )
}


3 Likes

Oi @flavicastelo, tenta comentar a linha localStorage.clear();
Estou tendo um problema semelhante mas ainda não consegui solucionar, mesmo seguindo a indicação do professor.
Nesse post coloquei uma dica sobre estilização. Me diga se gosta:

2 Likes

Oi, já tentei, não muda.
Se o repositório nunca aparecesse, mas ele aparece, se eu incluir enquanto estou com com a pagina aberta, como mostro no print.

1 Like

Sobre o estilo, meu problema foi que não tinha sido mostrado como o professor fez, mas na aula 4 ele mostrou parcialmente e estou pesquisando sobre isto agora. Ele não chama um arquivo de CSS, ele usa um arquivo de JS.

1 Like

Será que tem alguma relação com o seu CSS? Seu fundo é preto com letras brancas. Se o fundo não estiver carregando por algum motivo na primeira chamada os repositórios podem estar lá e você não estar vendo. Tira o CSS como teste. O que acha?

1 Like

No estilo css ele faz um import do styled-components ,deu erro para mim eu pesquisei achei o site e fiz a instalação pelo terminal, lá no S.ListItem “repository” eu alterei para “repository.name” e funcionou ,uma colega deu essa mesma dica do colega acima de comentar localstorage.clear

1 Like

Não, eu consegui alterar o estilo para como o professor fez e segue dando o erro. Como eu consigo fazer o repositorio aparecer se eu alterar o codigo enquanto estou com a pagina de repo aberta, assim como mostro nos prints, vejo que o meu repositorio passa null, por isso vem vazio, eu fiz a alteração do professor da aula seguinte e segue com o msm bug.

1 Like

Essa parte do estilo eu resolvi, eu só fiz diferente no meu pq ele ainda não havia mostrado, mas na aula seguinte ele mostrou e eu pesquisei por fora. Só não quis fazer idêntico.
Na primeira imagem meu código estava comentado então quando pesquiso o usuario na Home, sou redirecionada para Repositorios normalmente.

então mantenho a pagina aberta sem atualizar e descomento o codigo, então os repositorios aparecem, como mostro na segunda imagem.

Na aula seguinte o prof ensina a fazer um condicional para resolver a questão do clear, mas o meu segue com o mesmo bug, a diferença é que, ao descomentar o codigo, ao invés de mostrar os repositorios, ele volta pra pagina inicial, ou seja, ele considera que meu repositorio está vazio, e eu não sei como consertar isso.

1 Like

Vou colocar minhas telas para você comparar







3 Likes

Meu amigo! Muito obrigada!!!
Sabe qual era o erro?
Passei { } na useState, enquanto é pra ser [ ]

3 Likes

Eu confere o seu e fique intrigado no meu repository eu tive que colocar repository.name o seu funcionou sem isso né ,confere as minhas telas por favor e vê o que tem diferente do seu

2 Likes

Meu código atualizado e funcionando:
Home:

import React, { useState } from 'react';
import axios from 'axios';
import * as S from './styled';
import { useNavigate } from 'react-router-dom';


function App(props) {
  const navigate = useNavigate();
  const [usuario, setUsuario] = useState('');
  const [erro, setErro] = useState(false);

  function handlePesquisa(){
    axios.get(`https://api.github.com/users/${usuario}/repos`).then(response =>{ //se useState recebe strings entao armazena os dados
        const repositories = response.data;
        const repositoriesName = [];
        repositories.map((repository)=> {
          repositoriesName.push(repository.name);
        });
        localStorage.setItem('repositoriesName', JSON.stringify(repositoriesName));
        setErro(false);
        navigate('/repositories');
    }).catch(err => {   //se nao recebe manda msg de erro
      setErro(true);
    });
    
  }

  return (   
    <S.ContainerPrincipal> 
      <S.Title>Pesquisa de 
      repositórios</S.Title>
      <S.ContainerBox>
        <S.Text>Digite abaixo o nome do usuário que você deseja vê os repositórios do <b>GitHub</b>:</S.Text>
        <S.ContainerForm>
          <S.Input className='usuarioInput' placeholder='Digite o usuário ' value={usuario} onChange={e => setUsuario(e.target.value)}/>
          <S.Button type="button" className='btn' onClick={handlePesquisa}>Pesquisar</S.Button>    
        </S.ContainerForm>
        { erro ? <S.ErrorMsg>Ocorreu um erro, tente novamente!</S.ErrorMsg> : ''}
        
        
      </S.ContainerBox>  
     
    </S.ContainerPrincipal>
  );
}

export default App;

Meu Repositories:

import React, { useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom';
import * as S from './styled';

export default function Repositories(){
    const navigate = useNavigate();
    const [ repositories, setRepositories ] = useState([]);

    useEffect(()=>{
        let repositoriesName = localStorage.getItem('repositoriesName');
        if(repositoriesName !== null){
            repositoriesName = JSON.parse(repositoriesName);
            setRepositories(repositoriesName);
            localStorage.clear();
        } else {
            navigate('/');
        }              
 
    }, []);

    return(
        <S.Container>
            <S.Title>Repositórios</S.Title>
             <S.List>
                    { repositories.map(repository => {
                        return(
                            <S.ListItem>Repositório: { repository }</S.ListItem>
                        )
                    }) }
            </S.List>     
            <S.LinkHome to="/">Voltar</S.LinkHome>
        </S.Container>
    )
}
2 Likes

Manda as telas Index,routes e app por favor

1 Like

INDEX:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    <App />
  
);

ROUTES

import React from "react";
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import Repositories from "./Repositories";
import Home from './Home';


export default function RoutesApp() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/' exact element={<Home />} />
                <Route path='/repositories' element={<Repositories />} />
            </Routes>
        </BrowserRouter>
    )
}

APP

import React from "react";
import RoutesApp from "./routes";

function App() { 
  return(
   <RoutesApp />
  );
}

export default App;

3 Likes

Tô com problema nesse localstorage.clear() tenho que comentar ele para funcionar

1 Like

Na aula seguinte ele ensina como corrigir

1 Like

Descobri o erro aqui no Index react.strictmode o sem não tem eu comentei o meu e funcionou

1 Like

gente, pra instalar o styled-components, alguém no slack me disse que o comando a ser utilizado é npm add styled-components, mas a documentação oficial do pacote diz que é npm install --save styled-components. Qual devo usar afinal?

1 Like

Estou com o mesmo problema, mas o código parece igual o do professor. Passei [] na useState, como tem que ser. Não sei o que acontece…

1 Like

Instalei assim, mas uso linux, não sei se há diferença.

$ npm i styled-components
2 Likes