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>
</>
)
}
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:
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.
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.
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?
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
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.
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.
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.
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
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?
