Javascript React在重新呈现时不更新JSON提要

我正试图构建一个小的React应用程序，从JSON提要中获取棒球得分。通过cronjob在服务器上更新JSON提要，以每分钟获得最新的结果

当我最初查看react应用程序时，我会得到最新的分数。我设置了一个间隔，以便每分钟渲染一次ReactDOM。

console.log

正确激发，但JSON提要中的值不会更新。如果我重新加载页面，我可以看到信息更新（例如，它被卡住了，说第四局结束，而实际上是进入第五局）

这是我的

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();

var ReactDOM=require（'react-dom'）；
var MLBScores=React.createClass({
getInitialState:函数（）{
返回{
主队：''，
homescore:“”，
阿瓦泰姆：“，
awayscore:“，
状态：“赛前”，
第1局：，
伊宁州：“顶级”
};
},
componentDidMount:function（）{
this.serverRequest=$.get（this.props.feed，函数（结果）{
var scoreFeed=result.data，
status=scoreFeed.games.games[4]。status.status，
inning=scoreFeed.games.games[4]。status.inning，
inningState=scoreFeed.games.games[4]。status.inning\u state；
if（scoreFeed.games.games[4].linescore）{
var homeScore=scoreFeed.games.game[4].linescore.r.home；
var awayScore=scoreFeed.games.game[4].linescore.r.away；
}
这是我的国家({
主队：scoreFeed.games.games[4]。主队名称，
homescore:homescore，
awayteam:scoreFeed.games.games[4]。客场球队名称，
awayscore:awayscore，
状态：状态，
局数：局数，
赢州：赢州
});
}.约束（这个）；
},
componentWillUnmount:function（）{
这是.serverRequest.abort（）；
},
render:function（）{
返回(
{this.state.hometeam}{this.state.homescore}vs.{this.state.awayteam}{this.state.awayscore}

{this.state.status}{this.state.inningState}{this.state.inning}
);
}
});
函数render（）{
ReactDOM.render（ ,
document.getElementById（'app'）
);
}
setInterval（函数（）{
console.log（'已呈现分数'）
render（）；
}, 60000);
render（）；

---

我是个新手，所以我可能错过了一些简单的东西。任何帮助都将不胜感激。如果你愿意的话，你可以实时查看这个应用程序，但是请注意，我正在ping的游戏可能会结束，而且情况有点像被扔出窗外。谢谢

我只能从这里猜测一下，因为无法访问提要链接。这应该行得通。试试看，让我知道

您需要一个componentWillReceiveProps函数来处理后续渲染

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();

var ReactDOM=require（'react-dom'）；
var MLBScores=React.createClass({
getInitialState:函数（）{
返回{
主队：''，
homescore:“”，
阿瓦泰姆：“，
awayscore:“，
状态：“赛前”，
第1局：，
伊宁州：“顶级”
};
},
更新（道具）{
this.serverRequest=$.get（props.feed，函数（结果）{
var scoreFeed=result.data，
status=scoreFeed.games.games[4]。status.status，
inning=scoreFeed.games.games[4]。status.inning，
inningState=scoreFeed.games.games[4]。status.inning\u state；
if（scoreFeed.games.games[4].linescore）{
var homeScore=scoreFeed.games.game[4].linescore.r.home；
var awayScore=scoreFeed.games.game[4].linescore.r.away；
}
这是我的国家({
主队：scoreFeed.games.games[4]。主队名称，
homescore:homescore，
awayteam:scoreFeed.games.games[4]。客场球队名称，
awayscore:awayscore，
状态：状态，
局数：局数，
赢州：赢州
});
}.约束（这个）；
},
componentDidMount:function（）{
this.updateUI（this.props）；
},
组件将接收道具：函数（新道具）{
this.updateUI（newProps）；
},
componentWillUnmount:function（）{
这是.serverRequest.abort（）；
},
render:function（）{
返回(
{this.state.hometeam}{this.state.homescore}vs.{this.state.awayteam}{this.state.awayscore}

{this.state.status}{this.state.inningState}{this.state.inning}
);
}
});
函数render（）{
ReactDOM.render（,
document.getElementById（'app'）
);
}
setInterval（函数（）{
console.log（'已呈现分数'）
render（）；
}, 60000);
render（）；

我只能从这里猜测，因为无法访问提要链接。这应该行得通。试试看，让我知道

您需要一个componentWillReceiveProps函数来处理后续渲染

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();

var ReactDOM=require（'react-dom'）；
var MLBScores=React.createClass({
getInitialState:函数（）{
返回{
主队：''，
homescore:“”，
阿瓦泰姆：“，
awayscore:“，
状态：“赛前”，
第1局：，
伊宁州：“顶级”
};
},
更新（道具）{
this.serverRequest=$.get（props.feed，函数（结果）{
var scoreFeed=result.data，
status=scoreFeed.games.games[4]。status.status，
inning=scoreFeed.games.games[4]。status.inning，
inningState=scoreFeed.games.games[4]。status.inning\u state；
if（scoreFeed.games.games[4].linescore）{
var homeScore=scoreFeed.games.game[4].linescore.r.home；
var awayScore=scoreFeed.games.game[4].linescore.r.away；
}
这是我的国家({
主队：scoreFeed.games.games[4]。主队名称，
homescore:homescore，
awayteam:scoreFeed.games.games[4]。客场球队名称，
awayscore:awayscore，
状态：状态，
局数：局数，
赢州：赢州
});
}.约束（这个）；
},
componentDidMount:function（）{
this.updateUI（this.pr