Question

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

当我最初查看我的反应应用时，我获得了最新的分数。我设置了一个间隔来每分钟渲染一次ReactDOM。 console.log正常触发，但JSON Feed中的值未更新。如果我重新加载页面，我可以看到信息更新（例如它被称为第4局结束，而实际上它已进入第5局）。

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

我只能从这里猜测，因为Feed链接无法访问。这应该工作。试一试，让我知道。

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

React不会在重新渲染时更新JSON Feed

1 个答案: