CODEWITHSUNDEEP
javascriptjsonreactjs
erwstout
erwstout

Reputation: 1307

React not updating JSON feed on re-render

I'm attempting to build a small React app that pulls baseball scores from a JSON feed. The JSON feed gets updated on the server by a cronjob to get the latest results every minute.

When I view my react app initially, I get the most up to date scores. I set an interval to render the ReactDOM every minute as well. The console.log fires properly but the values from the JSON feed aren't updated. If I reload the page, I can see the information update (for instance it was stuck saying End of 4th Inning when in reality it was into the 5th).

Here is my index.jsx

var ReactDOM = require('react-dom');

var MLBScores = React.createClass({
  getInitialState: function() {
    return {
      hometeam: '',
      homescore: '',
      awayteam: '',
      awayscore: '',
      status: 'Pre-game',
      inning: '1',
      inningState: 'Top'
    };
  },

  componentDidMount: function() {

    this.serverRequest = $.get(this.props.feed, function(result) {

    var scoreFeed = result.data,
        status  = scoreFeed.games.game[4].status.status,
        inning  = scoreFeed.games.game[4].status.inning,
        inningState  = scoreFeed.games.game[4].status.inning_state;

    if( scoreFeed.games.game[4].linescore ){
        var homeScore = scoreFeed.games.game[4].linescore.r.home;
      var awayScore = scoreFeed.games.game[4].linescore.r.away;
    }

      this.setState({
        hometeam: scoreFeed.games.game[4].home_team_name,
        homescore: homeScore,
        awayteam: scoreFeed.games.game[4].away_team_name,
        awayscore: awayScore,
        status: status,
        inning: inning,
        inningState: inningState
      });

    }.bind(this));
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    return (
      <div>
        {this.state.hometeam} {this.state.homescore} vs. { this.state.awayteam} {this.state.awayscore}
        <hr />
        {this.state.status} {this.state.inningState} {this.state.inning}
      </div>
    );
  }
});

function render(){
  ReactDOM.render( < MLBScores feed= "http://198.199.92.64/src/client/app/mlb-scoreboard.json" / > ,
    document.getElementById('app')
  );
}

setInterval(function(){
  console.log('Scores were rendered.')
  render();
}, 60000);
render();

I'm pretty new to React so maybe I'm missing something simple. Any help would be appreciated. You can view the app in real time if you wish here - but be aware that the game I'm currently pinging may end and the situation is kind of thrown out the window. Thanks!

Upvotes: 0

Views: 1104

Answers (1)

Bhargav Ponnapalli
Bhargav Ponnapalli

Reputation: 9422

I can only take a guess from here, since the feed link is unreachable. This should work. Give it a try and let me know.

You need a componentWillReceiveProps function to handle subsequent renders. 

var ReactDOM = require('react-dom');

var MLBScores = React.createClass({
  getInitialState: function() {
    return {
      hometeam: '',
      homescore: '',
      awayteam: '',
      awayscore: '',
      status: 'Pre-game',
      inning: '1',
      inningState: 'Top'
    };
  },
  updateUI(props){

      this.serverRequest = $.get(props.feed, function(result) {

    var scoreFeed = result.data,
        status  = scoreFeed.games.game[4].status.status,
        inning  = scoreFeed.games.game[4].status.inning,
        inningState  = scoreFeed.games.game[4].status.inning_state;

    if( scoreFeed.games.game[4].linescore ){
        var homeScore = scoreFeed.games.game[4].linescore.r.home;
      var awayScore = scoreFeed.games.game[4].linescore.r.away;
    }

      this.setState({
        hometeam: scoreFeed.games.game[4].home_team_name,
        homescore: homeScore,
        awayteam: scoreFeed.games.game[4].away_team_name,
        awayscore: awayScore,
        status: status,
        inning: inning,
        inningState: inningState
      });

    }.bind(this));

  },


  componentDidMount: function() {
     this.updateUI(this.props);

  },

  componentWillReceiveProps : function(newProps){
     this.updateUI(newProps);
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    return (
      <div>
        {this.state.hometeam} {this.state.homescore} vs. { this.state.awayteam} {this.state.awayscore}
        <hr />
        {this.state.status} {this.state.inningState} {this.state.inning}
      </div>
    );
  }
});

function render(){
  ReactDOM.render( < MLBScores feed= "http://198.199.92.64/src/client/app/mlb-scoreboard.json"/>,
    document.getElementById('app')
  );
}

setInterval(function(){
  console.log('Scores were rendered.')
  render();
}, 60000);
render();

Upvotes: 2

Related Questions