Estou construindo uma aplicação em React
e preciso renderizar uma lista com todos os usuários, chamados da API
. Uso o map
para percorrer os usuários, mas o navegador retorna o erro:
TypeError: Cannot read property 'map' of undefined
.
Meu códio está assim:
<ul>
{devs.map((dev) => (
<li key={dev._id} className="dev-item">
<header>
<img src={dev.avatar_url} alt={dev.name}></img>
<div className="user-info">
<strong>{dev.name}</strong>
<span>{dev.techs.join(', ')}</span>
</div>
</header>
<p>{dev.bio}</p>
<a href={`https://github.com/${dev.github_username}`}>Acessar perfil</a>
</li>
))}
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Como resolver o erro?
devs
? De fato não é um erro do React. Provavelmentedevs
não está sendo acessado corretamente—atualmente,devs
éundefined
, e por isso o erro.devs
e como foi talvez tenha inicializado errado. Bom coloque toda a função.