.mapは関数ではありません。React

Question

私はJSONファイル（ゲームの得点）からいくつかのデータを取得する小さなアプリケーションに取り組んでいます。現在、私はエラーgames.map is not a functionを取得しています。スタックオーバーフローについても同様の記事がありましたが、初期状態は配列ではありませんでしたが、初期状態を配列に設定しているため、適用されるとは思われません。以下は私の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) 
    }); 
    }