How to update properties in React setState

1

I'm trying to add objects to the 2 property of the FecthApis component. I make the call to the two Api's, and receive the requisition with the expected objects. However, when I try to include these objects in both properties with "setState", I get the following error for the second property (feedGitHub): uncaught (in promise) TypeError: Can not read property 'setState' of null

The code is as follows:

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;

Thank you very much for your attention.

    
asked by anonymous 17.05.2017 / 21:01

1 answer

0

The problem is that this within the axios callback is no longer your component. You have two alternatives:

  • use arrow functions
  • use an alias

With arrow function :

changes

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

for

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

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

Note: I do not understand the idea of var feed2 = github.data.items.map(obj => obj) . Is something missing? or do you want to make a copy? in this case you can use slice , but unnecessary because the array was created two lines above.

    
17.05.2017 / 22:49