Olá,
estou treinando um pouco react com a api do github. Eu dividi meu componente em um card (tem as informações dos usuários e etc) e na view.
Eu estou fazendo o fetchData na view e renderizerando em um componente diferente. A ideia é eu fazer um map com o componente diferente, mas quando eu busco um novo usuário na api me retorna um erro.
E o "engraçado" é que este erro só acontece no metodo .map(), se eu tirar ele e deixar o jsx fixo, pega normalmente.
este é meu componente que vai receber os dados do usuario
{this.props.user.map((cardUser) => (
<div id="info" key={cardUser.id}>
<div id="img">
<img src={cardUser.avatar_url === undefined ? require('../assets/default.jpg') : `${cardUser.avatar_url}`} alt="profile pic" />
</div>
<div id="description">
<h3>{cardUser.username === undefined ? 'Search your user' : cardUser.username}</h3>
<div id="boxInfos">
<div className="apiInfos">
<h3>Seguidores</h3>
<h4>{cardUser.followers}</h4>
</div>
<div className="apiInfos">
<h3>Seguindo</h3>
<h4>{cardUser.following}</h4>
</div>
<div className="apiInfos">
<h3>Localização</h3>
<h4>{cardUser.location}</h4>
</div>
</div>
</div>
<div id="url">
<a href={cardUser.html_url === undefined ? '#' : cardUser.html_url} target={cardUser.html_url === undefined ? '' : '_blank'}>></a>
</div>
<button onClick={() => this.props.toConcat(cardUser)}>Adicionar nova pesquisa</button>
</div>
))}
Minha promise
fetchData = () => {
const controller = new AbortController();
const signal = controller.signal
if(this.state.username === undefined || this.state.username === ''){
this.setState({
noInput: true,
anyError: true,
})
controller.abort();
return false;
}
const urlTofetch = `https://api.github.com/users/${this.state.username}`
fetch(urlTofetch)
.then(response => response.json())
.then(data => {this.setState({user: data})
if(data.login === undefined){
this.setState({noInput: false, anyError: true})
controller.abort();
}
if(data.id === undefined){
this.setState({anyError: true})
}
})
.catch(err => {this.setState({anyError: true})});
}
Meu state
this.state = {
user: [{
username: undefined,
login: undefined,
avatar_url: undefined,
followers: undefined,
following: undefined,
location: undefined,
html_url: undefined,
id: undefined
}],
anyError: false,
noInput: false,
}
Import do componente CardUser
<CardUser user={this.state.user} />
Ficarei muito grato a quem puder me ajudar