Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Erro ao utilizar map() no React

Olá,

Sera que alguém aqui já trabalhou com a API do instagram utilizando React?

Estou com o seguinte problema, preciso obter os dados das pessoas que sigo.. consigo fazer a requisição e retornar os valores... Estou obtendo os dados da seguinte maneira.

constructor(){
    super();
    this.state = {pessoas : []};
  }

  componentDidMount(){

    $.ajax({

      url: 'https://api.instagram.com/v1/users/self/follows',
        dataType: 'jsonp',
        type: 'GET',
        data: {access_token: '521503525.fcd4b39.03c6fc4a488d1167f8920a25e3'},
        success: function(data){
            this.setState({pessoas:data});
        }.bind(this)
    });
  }

Quando realizo o seguinte teste, para verificar se foi o retornado algum valor, obtenho sucesso

render() {
    return (
      <div>
        {
          console.log(this.state.pessoas)
        }
      </div>
    );
  }

No console me retorna os valores que espero

{pagination: {…}, data: Array(4), meta: {…}}data:
(4) [{…}, {…}, {…}, {…}]meta:{code: 200}pagination:{}__proto__:Object

Porem quando tento fazer um map com esse dados da seguinte forma me retorna um erro.

  render() {
    return (
      <div>
        {
          this.state.pessoas.map(function(pessoa){
            <p>{pessoa.id}</p>
          })
        }
      </div>
    );
  }

Erro:

TypeError: this.state.pessoas.map is not a function
App.render
C:/xampp/htdocs/react/insta-testes/src/App.js:32
  29 | return (
  30 |   <div>
  31 |     {
> 32 |       this.state.pessoas.map(function(pessoa){
  33 |         <p>{pessoa.id}</p>
  34 |       })
  35 |     }

Se algum tiver alguma ideia e poder me ajudar ficaria muito feliz =]

2 respostas
solução!

Oi Luiz,

Pelo console.log vejo que não é bem o json que vc esperava pra fazer o map. Dá uma olhada no retorno do ajax e depois me fala =)

hahahaha é um objeto.... consegui resolver agora Thiago, muito obrigado!!!