Function (http-request) is running without a Functioncall

1

I’m working on the React-Project “Build a Camper Leaderboard” and in one of my three modules I have the problem, that the function componentDidMount is running without any call in this or a other module.

The whole code on Codepen: http://codepen.io/vetoCode/pen/YGybYz?editors=1010

Here you can see the LeaderBoardTableBody Module:

var LeaderBoardTableBody = React.createClass({
  getInitialState: function() {
    return {
      nr: '',
      name: '',
      picUrl: '',
      points30Days: '',
      pointsAllTime: ''
    };
  },
  componentDidMount: function() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", this.props.source, true); 
    xhr.send();
    xhr.onreadystatechange = function () { 
      if (xhr.readyState != 4 || xhr.status != 200) {
        console.log('error'); 
      } else {
        var response = JSON.parse(xhr.responseText);
        console.log(response[0]);
      }
    }; 
  },
  render: function() {
    //this.componentDidMount();
    return (
      <tr>
        <td>{this.state.nr}</td>
        <td>{this.state.picUrl}{this.state.name}</td>
        <td>{this.state.points30Days}</td>
        <td>{this.state.pointsAllTime}</td>
      </tr>
    )
  }
});
2

This is not a problem. It is how React works. You don’t call Lifecycle Methods yourself, they are executed by React “at specific points in a component’s lifecycle”.

1 Like
3

Thanks for your answer :slight_smile: This link is very usefull!