javascript - React not updating JSON feed on re-render -
i'm attempting build small react app pulls baseball scores json feed. json feed gets updated on server cronjob latest results every minute.
when view react app initially, date scores. set interval render reactdom every minute well. console.log
fires values json feed aren't updated. if reload page, can see information update (for instance stuck saying end of 4th inning when in reality 5th).
here 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 rendered.') render(); }, 60000); render();
i'm pretty new react maybe i'm missing simple. appreciated. can view app in real time if wish here - aware game i'm pinging may end , situation kind of thrown out window. thanks!
i can take guess here, since feed link unreachable. should work. give try , let me know.
you need componentwillreceiveprops function 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 rendered.') render(); }, 60000); render();
Comments
Post a Comment