0

Estou consumindo a API da Deezer, utilizando useEffect e useState no ReactJS para listar determinada track (um exemplo), porém quando utilizo o .map, para renderizar, é retornado o seguinte erro:

TypeError: musicas.map is not a function

Depois de pesquisar, achei que fosse pela assincronicidade e o componente estava sendo renderizado antes de chegar os dados, porém estou utilizando async await para consumir a API.

Código:

import React from 'react';

import { Container } from '../../styles/GlobalStyles';
import { CardContainer } from './styled';
import axios from '../../services/axios';

export default function Home() {
  const [musicas, setMusicas] = React.useState([]);

  async function getData() {
    const response = await axios.get('/track/3135556');
    setMusicas(response.data);
  }

  React.useEffect(() => {
    getData();
  }, []);

  React.useEffect(() => {}, [musicas]);

  if (musicas.length === 0) {
    return (
      <Container>
        <h1>Carregando</h1>
        <hr />
      </Container>
    );
  }

  return (
    <Container>
      <h1>Home</h1>
      <hr />

      {musicas.map((musica) => (
        <CardContainer key={String(musica.id)}>{musica.title}</CardContainer>
      ))}
    </Container>
  );
}

Quando comento a parte do código que está listando (.map), e dou um console.log(musicas), no useEffect, ele retorna para mim os dados normalmente no console, logo o endereço da API está correto e ele está chegando os dados.

React.useEffect(() => {console.log(musicas)}, [musicas]);

inserir a descrição da imagem aqui

Tentei listar com e sem o if (musicas.length === 0), mas dá o mesmo erro.

Creio que apesar do assync await, o componente esteja requerendo os dados antes de terem chegado, se for isso, não sei como resolver. Se alguém souber como resolver o que seja que esteja causando isso, agradeço desde já.

3
  • 1
    não é um array é um objeto simples!
    – novic
    Commented 20/08/2021 às 12:38
  • Como a resposta da API é um objeto acredito que isso resolveria o problema setMusicas([response.data]); mas você tem certeza que esta batendo a request no endpoint correto? me parece que você esta buscando os dados de apenas uma musica ao invés de receber uma lista com varias. Commented 20/08/2021 às 12:59
  • 1
    @GabrielJosédeOliveira deu certo. Então, eu tava fazendo apenas como um exemplo pra facilitar quando eu fosse chamar no .map. No caso realmente é um só uma faixa, apenas queria fosse renderizado algo, mas cara, apesar de ser uma resolução muito simples, funcionou, muito obrigado. Commented 20/08/2021 às 13:06

1 Resposta 1

-1

Tem um probleminha no React, em que ele tenta renderizar TUDO e depois ir montando os componentes ao poucos, e nesse renderizar tudo da esses erros. Faça o seguinte na parte

 {musicas.map((musica) => (
    <CardContainer key={String(musica.id)}>{musica.title}</CardContainer>
  ))}

faça o seguinte

{musicas && musicas.map((musica) => (
    <CardContainer key={String(musica.id)}>{musica.title}</CardContainer>
  ))}

ou

{musicas ? musicas.map((musica) => (
    <CardContainer key={String(musica.id)}>{musica.title}</CardContainer>
  )) : (<div> Teste </div>)}

Ve se resolve o seu caso.

1
  • Muito obrigado pela informação, mas meu erro estava quando eu ia setar o reponse.data, no caso teria que ser [response.data] Commented 20/08/2021 às 13:08

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 .