2

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?

2
  • De onde vem esse suposto array devs? De fato não é um erro do React. Provavelmente devs não está sendo acessado corretamente—atualmente, devs é undefined, e por isso o erro. Commented 16/01/2020 às 19:08
  • Está fazendo o treinamento da semana rocketseat e não prestou atenção na áula !!! kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk, precisa postar a sua função completa só isso não sabemos da onde vem essa devs e como foi talvez tenha inicializado errado. Bom coloque toda a função.
    – novic
    Commented 16/01/2020 às 23:04

1 Resposta 1

3

De acordo com os comentários, o erro do "Cannot read property 'map' of undefined." ocorre porque o "map" se aplica a arrays, e "devs" deve estar nulo.

Como um dos colegas comentou que este código é da semana OmniStack, foi possível identificar a causa do erro. O "devs" faz parte do state do seu componente, ao ser inicializado, ele é um array vazio.

function App() {

  const [devs, setDevs] = useState([]);

  //Programação do componente

}

Ao carregar o componente, você deve fazer a pesquisa na API

function App() {

  const [devs, setDevs] = useState([]);

  useEffect(() =>{
    async function loadDevs() {
      const response = await api.get('/devs');

      setDevs(response.data);
    }

    loadDevs()
  }, []);
  //Programação do componente

}

Se o erro persistir, pode ser problema na consulta da API, você deve fazer um teste desta rota GET para ver se está retornando algum usuário. Você pode testar a comunicação usando o Postman

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .