javascript - React 在重新渲染时不更新 JSON feed

Question

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

当我最初查看我的 React 应用程序时，我得到了最新的分数。我也设置了每分钟渲染 ReactDOM 的时间间隔。 console.log 正常触发，但 JSON feed 中的值未更新。如果我重新加载页面，我可以看到信息更新(例如，它被卡在说“第四局结束”，而实际上已经进入了第五局)。

这是我的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();

我对 React 还很陌生，所以也许我错过了一些简单的东西。任何帮助，将不胜感激。如果您愿意，您可以实时查看该应用程序here - 但请注意，我当前正在 ping 的游戏可能会结束，并且这种情况有点被抛到了窗外。谢谢!

Answer 1

我只能从这里猜测，因为提要链接无法访问。这应该有效。尝试一下并告诉我。

您需要一个 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();