Eu estou tentando passar os dados da api para uma componente filho, porem sempre ta dando esse erro quando eu digitando o nome do cantor no input, pois desejo fazer o fetch a cada letra digitada, não apenas apos completar o nome.
Os dados estão chegando normalmente, pelo console.log
pude ver que estão todos lá, então acredito que seja realmente um problema no .map
import React, { Component } from 'react';
import ItemPage from './apiUnica';
import querystring from 'querystring';
class api extends Component {
constructor(props){
super(props);
this.state = {data: [], isLoaded: false, display_name: '' }
}
componentDidMount(){
const accessToken = window.location.search.slice(14);
fetch('https://api.spotify.com/v1/me', {headers: {'Authorization': 'Bearer '+accessToken}})
.then(response => response.json())
.then(data => this.setState({display_name: data.display_name, isLoaded: true}))
}
async updateResult(){
const artist = document.getElementById("singer").value;
const accessToken = window.location.search.slice(14);
await fetch('https://api.spotify.com/v1/search?'+querystring.stringify(
{q: artist,
type: 'artist',
limit: '5'
}),
{headers: {'Authorization': 'Bearer ' + accessToken}})
.then(response => response.json())
.then(data => this.setState({
data: data.artists
}))
if(this.state.data){
console.log(this.state.data)
}
}
render(){
return(
<div>
<div>
<input type="text" onChange={this.updateResult.bind(this)} id="singer"/>
{!this.state.isLoaded ? <h1>Carregando</h1> : <h1>Bem vindo {this.state.display_name}</h1>}
{!this.state.data ? 'missing data' : this.state.data.map(item => <ItemPage singerName={item.artists.name} />)}
</div>
</div>
);
}