.map 不是函数 React

Question

我正在开发一个小应用程序，它将从 JSON 文件（游戏得分）中提取一些数据。目前我收到错误 games.map is not a function。我在 Stack Overflow 上看到另一个类似的 post，但答案是初始状态不是数组，但我已将初始状态设置为数组，所以我认为它不适用。下面是我的 React JS 谁能指出我正确的方向？它可能与 JSON 结构有关吗？您可以找到 json 文件 here。谢谢！

class SingleGame extends React.Component{
  render(){
    return(
      <div>{this.props.homeTeam}</div>
    );
  }
}

class GameBox extends React.Component{

  constructor() {
    super();

    this.state = {
      games: []
    };
  }

  componentWillMount() {
    this._getGameScores();
  }

  componentDidMount() {
    this._timer = setInterval(() => this._getGameScores(), 45000);
  }

  componentWillUnmount() {
    clearInterval(this._timer);
  }

  _getGameScores(){
    jQuery.ajax({
      method: 'GET',
      url: 'http://pinetar-app.com/src/client/app/mlb-scoreboard.json',
      success: function(games){
        this.setState({games: games.data});
      }.bind(this)
    });
  }

  _mapGameScores(){
    const games = this.state.games;

    return games.map((games) => {
      return(
        <SingleGame homeTeam={games.game.home_team_name} />
      );
    });
  }

  render() {
    const gameList = this._mapGameScores();
    return(
      <div>
      {gameList}
      </div>
    );
  }
}

ReactDOM.render(
  <GameBox />, document.getElementById('pinetar')
);

Answer 1

您没有正确访问数组，请尝试对此使用映射：

data.data.games.game

像这样：

Working example

_getGameScores(){
    jQuery.ajax({
      method: 'GET',
      url: 'http://pinetar-app.com/src/client/app/mlb-scoreboard.json',
      success: function(data){
        this.setState({games: data.data.games.game });
      }.bind(this)
    });
  }

.map 不是函数 React

.map is not a function React

ajax

jquery

json

jsx

reactjs