React/JSX - マッププロパティがオブジェクトに見つかりません

Question

新しいフレームワークに反応しました。私は問題に直面しており、ここで何か助けが必要です。

API呼び出しにより、オブジェクトが複数行あるオブジェクトが生成されます。 私はそのオブジェクトの地図を使ってdivをレンダリングしたかったのです。

export default class SearchResult extends Component { 

    static propTypes = { 
     courses:React.PropTypes.object, 
    } 

    render() { 

    .... 
    this.props.courses.map(entity => renderEntity(entity)); 
    ... 
    } 
} 

私はマップがプロパティではないというエラーがあります。 Googleで検索した後、オブジェクトにマッププロパティがありませんでした。配列だけがそれを持っています。

私はいくつか助けてくれるかもしれません 1）どのようにマップ機能/等価を得るのですか？私がしたいのは、オブジェクト内のすべての要素に対して一連のhtmlタグをレンダリングすることだけです。これは検索結果を作成することです。 2）オブジェクトを配列に変換できますか？それは必要ですか？ 3）（this.props.courses）がのprotoが初期化されているため、常にtrueになる場合があります。その場合、コースに実際にデータがあるかどうかを確認します。 courses.lengthなどは長さのプロパティを持っていないか、それは配列ではありませんでした。

Object console log output 注：これは私の最初の質問です。だから間違いを見つけたら親切に無視してください。

ご協力いただきありがとうございます。 飲み会

Answer 1

React以上の問題はこれが純粋なJSの問題です。あなたの必要性は、オブジェクトの値を循環している場合、このような何かがうまく動作する必要があります。このような将来の課題のための提案として

Object.keys(this.props.courses).map(course => renderEntity(this.props.courses[course])) 

を、常にこの特定のケースthisには、hereを探し始める、ですあなたの問題のような理想。

Answer 2

A本当にハック提案は以下のようになります。

Object.prototype.map = function map(iter) { 
    var ret = {}; 

    for (var prop in this) { 
    ret[prop] = iter(this[prop], prop, this); 
    } 

    return ret; 
}; 

次にあなたが

courses.map((value, propName, courses) => { 
    /* return some modified form of `value` */ 
}); 

ようにそれを呼び出し、それがマッピングされたの浅いコピーである新しいオブジェクトを返すことができますプロパティ。また、オブジェクトの反復可能なプロパティのみをマップします。

明確にするために、私は実際にこれをプロダクションコードで使用することを提案していません。特定のケースでうまくいくより管理しやすいソリューションが見つかるまで、これは一時的に機能します。