this.props.stats.mapはコンソールで機能

Question

ではありません、私はAPIからデータをバック受け付けております：https://github.com/SunDwarf/OWAPI/blob/master/api.md

しかし、私は戻って取得していますページにそれをレンダリングしようとしているファイルにエラー：this.props.stats.mapは関数ではありません 以前は天気予報アプリケーションのためにこのようにしていましたが、問題がなかったため、これを把握するための場所がわかりません。 * EDIT：関数のmapStateToProps（{stats}）に中括弧を追加しました。 "TypeError：未定義のプロパティ 'achievements'を読み取ることができません。 これは情報へのパスが正しくないことを意味しますか？

コード：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 


class OverwatchStats extends Component { 
    renderStats(achievementData) { 
    return (
     <tr> 
     <td>{achievementData.data.eu.achievements.support}</td> 
     </tr> 
    ); 
    } 

    render() { 
    return (
    <table className="table table-hover"> 
     <thead> 
      <tr> 
      <th>Hero Achievements</th> 
      <th>Got</th> 
     </tr> 
     </thead> 
     <tbody> 
      {this.props.stats.map(this.renderStats)} 
     </tbody> 
    </table> 
    ); 
    } 
} 

function mapStateToProps({ stats }) { 
    return { stats }; 
    } 

export default connect(mapStateToProps)(OverwatchStats); 

私はここに私のコードを持っている：My Github

Answer 1

は、APIによると、統計は、オブジェクト、配列ではありませんので、あなたは

その上にマップすることはできません

Answer 2

Eldar Gが頭の爪を右に叩いた。

は、統計ので

var stats = {"stats": { 
    "typeofstat" : {}, 
    "othertypeofstat": {} 
    ... 
} 

次あなたは、オブジェクトのすべてのキーを反復処理するために、次の操作を行うことができます出力オブジェクトです。

Object.keys(this.props.stats).map((key) => { 
    var currentStat = stats[key]; 
    //do stuff with currentStat 
}); 

あなたはそれぞれstatに含まれているキーの種類に関する詳細情報が必要な場合は読むhttps://github.com/SunDwarf/OWAPI/blob/master/api.md#get-apiv3ubattletagstats。それはあなたの応答が深く入れ子にされたオブジェクトであるようです。あなたの好みや要求に応じて、そのようなオブジェクトを解釈して操作します。

これが役に立ちます。覚えておいてください。map、forEach、reduceなどのすべてのイテレータメソッドは、配列に対してのみ機能します！