estou consumindo uma API e exibindo dados com React. A API retorna o seguinte Json:
{
"1": {
"id": 1,
"nome": "Outros",
"abreviacao": "OUT",
"escudos": {
"60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
"45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
"30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
},
"nome_fantasia": "Outros"
},
"1349": {
"id": 1349,
"nome": "Ipatinga",
"abreviacao": "IPA",
"escudos": {
"60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
"45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
"30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
},
"nome_fantasia": "Ipatinga"
},
"1371": {
"id": 1371,
"nome": "Cuiabá",
"abreviacao": "CUI",
"escudos": {
"60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
"45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
"30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
},
"nome_fantasia": "Cuiabá"
},
"1390": {
"id": 1390,
"nome": "Icasa",
"abreviacao": "ICA",
"escudos": {
"60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
"45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
"30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
},
"nome_fantasia": "Icasa"
},
"2190": {
"id": 2190,
"nome": "Oeste",
"abreviacao": "OES",
"escudos": {
"60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
"45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
"30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
},
"nome_fantasia": "Oeste"
},
"2193": {
"id": 2193,
"nome": "Duque de Caxias",
"abreviacao": "DUQ",
"escudos": {
"60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
"45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
"30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
},
"nome_fantasia": "Duque de Caxias"
},
"2197": {
"id": 2197,
"nome": "Americana",
"abreviacao": "AME",
"escudos": {
"60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
"45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
"30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
},
"nome_fantasia": "Americana"
},
"2554": {
"id": 2554,
"nome": "Grêmio Prudente",
"abreviacao": "PRU",
"escudos": {
"60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
"45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
"30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
},
"nome_fantasia": "Grêmio Prudente"
},
"2565": {
"id": 2565,
"nome": "Luverdense",
"abreviacao": "LUV",
"escudos": {
"60x60": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_65x65.png",
"45x45": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_45x45.png",
"30x30": "https://s.glbimg.com/es/sde/f/organizacoes/escudo_default_30x30.png"
},
"nome_fantasia": "Luverdense"
}
}
Gostaria de exibir estes dados em uma tabela, mas ao tentar percorrer com map, tenho um erro:
TypeError: times.map is not a function
Segue o script em JS:
class App extends Component{
state = {
times: [],
}
async componentDidMount(){
const response = await api.get('')
this.setState({times: response.data})
console.log(response.data)
}
render(){
const {times} = this.state
return(
<div>
{times.map(time =>(
<li key={time.id}>
{time.id}
</li>
))}
</div>
)
}
}