.map ist keine Funktion React

Question

Ich arbeite an einer kleinen App, die einige Daten aus einer JSON-Datei (Spielstände) ziehen wird. Derzeit erhalte ich den Fehler games.map is not a function. Ich sah einen anderen Post in Stack Overflow, der ähnlich war, aber die Antwort war, dass der Anfangszustand kein Array war, aber ich habe meinen Ausgangszustand als Array festgelegt, also glaube ich nicht, dass es zutrifft. Unten ist mein React JS kann mir jemand in die richtige Richtung zeigen? Könnte es etwas mit der JSON-Struktur zu tun haben? Sie können die JSON-Datei here finden. Dankesehr!

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

Sie sind nicht das Array richtig zugreifen, versuchen Mapping über diese verwenden:

data.data.games.game 

wie so:

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) 
    }); 
    }