Question

我正在尝试使用componentDidMount将JSON Feed加载到我的React组件中。当我最初拉出JSON feed时，所有内容都会检出，我可以看到JSON数据就好了。当我尝试深入了解JSON数据以获取我开始收到undefined错误的游戏信息时，就会出现问题。

这是我的React JS：

var MLBScores = React.createClass({
  getInitialState: function() {
    return {
      hometeam: '',
      awayteam: ''
    };
  },

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

    var scoreFeed = result;

    var homeTeamName = scoreFeed.games.game[0].home_team_name;


      console.log(homeTeamName);

    }.bind(this));
  },

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

  render: function() {
    return ( < div > {
        this.state.hometeam
      }
      vs. {
        this.state.awayteam
      } < /div>
    );
  }
});

ReactDOM.render( < MLBScores feed= "https://raw.githubusercontent.com/erwstout/pinetar/develop/src/client/app/mlb-scoreboard.json" / > ,
  document.getElementById('container')
);

值得注意的是，如果我只是注释掉var homeTeamName行并将console.log(homeTeamName)更改为console.log(result);，则会打印出JSON数据。

在使用此codepen进入React之前，我已经充实了一些数据（以及我的想法），所以我对json文件的结构非常熟悉。所以我想知道它是否与我在React中如何进行通话有关？这是我第一次使用React，所以可能是我遗漏了一些东西。在我的codepen中，我获取了每个游戏的数据，但为了在React中测试它，我只是想获取game[0]信息。

我有JS Fiddle of the React code as well。任何帮助，将不胜感激。为了达到这一点，我跟着React Documentation一起跟着但是我迷路了。谢谢！

Answer 1

返回是一个字符串，而不是对象。修改此项以获取您的主队名称 var scoreFeed = JSON.parse(result).data;

或者你使用getJSON（）

Answer 2

我没有深入研究你的JSON响应，但三元组可能有所帮助..

var homeTeamName = 
scoreFeed.games && scoreFeed.games.game[0]scoreFeed ? scoreFeed.games.game[0].home_team_name : 
null

使用React的JSON请求返回undefined

2 个答案: