0

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>
    );
}

1 Resposta 1

0

De acordo com a documentação oficial do Spotify o tipo de variável de data.artists que você refere quando está modificando o state do componente é realmente um objeto, mas o que você quer é a propriedade items dentro de data.artists como é possível ver neste exemplo.

O que você deve fazer ao modificar o state é:

this.setState({data: data.artists.items});
1
  • Realmente era isso, depois eu vi que tinha mais coisas alem do array, e por isso o MAP não iria funcionar pois ele é preparado para trabalhar com apenas esse tipo de informação. Commented 23/07/2019 às 2:36

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 .