1

Estou tentando adicionar objetos a 2 propriedade do componente FecthApis. Faço a chamada para as duas Api's, e recebo a requisição com os objetos esperados. Porém, quando tento incluir esses objetos nas duas propriedades, com "setState", recebo o seguinte erro para a segunda propriedade (feedGitHub): uncaught (in promise) TypeError: Cannot read property 'setState' of null

o código é o seguinte:

import React, { Component } from 'react';
import axios from 'axios';


class App extends React.Component {

  render() {
    return (
      <div className="App">
        <FetchApis />
      </div>
    )
  }
}

class FetchApis extends React.Component {
  constructor(){
    super();
    this.state ={
      feedReddit: [],
      feedGitHub: []
    }
  }

  componentDidMount(){
    axios.all([
      axios.get('https://www.reddit.com/r/redditdev/top.json?limit=2'),
      axios.get('https://api.github.com/search/repositories?q=react+language:javascript&sort=stars&order=desc')
    ])
      .then(axios.spread(function (reddit, github) {
        var feed1 = reddit.data.data.children.map(obj => obj.data);
        var feed2 = github.data.items.map(obj => obj)
        console.log(feed1);
        console.log(feed2);
        this.setState({
          feedReddit: {feed1},
          feedGitHub: {feed2}
        })
      }));
  }

  render(){
    return(
      <div>
        <h1>teste</h1>
        <ul>
          {this.state.feedReddit.map(bananareddit =>
          <li key={bananareddit.id}>{bananareddit.title}</li>
          )}
        </ul>


        <ul>
          {this.state.feedGitHub.map(bananagithub =>
          <li key={bananagithub.id}>{bananagithub.name}</li>
          )}
        </ul>
      </div>

    )
  }

}

export default App;

Agradeço muito pela atenção.

1 Resposta 1

0

O problema é que o this dentro da callback do axios já não é o teu componente. Tens duas alternativas:

  • usar arrow functions
  • usar um alias

Com arrow function:

muda

.then(axios.spread(function (reddit, github) {

para

.then(axios.spread((reddit, github) => {

Com alias:

componentDidMount(){
    const self = this;
    axios.all([
      axios.get('https://www.reddit.com/r/redditdev/top.json?limit=2'),
      axios.get('https://api.github.com/search/repositories?q=react+language:javascript&sort=stars&order=desc')
    ])
      .then(axios.spread(function (reddit, github) {
        var feed1 = reddit.data.data.children.map(obj => obj.data);
        var feed2 = github.data.items.map(obj => obj)
        console.log(feed1);
        console.log(feed2);
        self.setState({
          feedReddit: {feed1},
          feedGitHub: {feed2}
        });
      }));
}

Nota: não percebo a ideia de var feed2 = github.data.items.map(obj => obj). Será que falta alguma coisa? ou queres fazer uma cópia? nesse caso podes usar slice, mas desnecessário pois a array foi criada duas linhas acima.

7
  • Muito obrigada pelo seu retorno, Sergio. Verdade, eu poderia pegar o data que retorna da chamada. Para quem ver esse post, até para ajudar, depois de consertar com a sua sugestão, aparecerá outro erro. Vou postar embaixo a resolução. Commented 17/05/2017 às 21:08
  • @AlineVianna não precisas postar a solução se usaste as ideias da minha resposta. Qual é o outro erro que aparece?
    – Sergio
    Commented 17/05/2017 às 21:09
  • erro TypeError: this.state.feedReddit.map is not a function Commented 17/05/2017 às 21:09
  • @AlineVianna ok, porque estás a criar um objeto aqui? feedReddit: {feed1}, devia ser só feedReddit: feed1,
    – Sergio
    Commented 17/05/2017 às 21:11
  • 1
    isso =) Eu me confundi..na documentação dizia que tinha q passar expressões por chaves. Obrigada mais uma vez, @Sergio ! Commented 17/05/2017 às 21:12

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 .