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]);
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á.
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..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.