連想配列

Question

私は、次の正規表現のコンポーネントを持っている

の値地図：次のように

const CommentBox = React.createClass({ 
    render: function() { 
    return (
     <div className="commentBox"> 
     <h1>Comments</h1> 
     <CommentList comments={this.props.comments}/> 
     <CommentForm /> 
     </div> 
    ); 
    } 
}); 

var CommentList = React.createClass({ 
    render: function() { 

    return <div className="commentList"> 
     {this.props.comments.toList().map(comment => 
     <Comment author={comment.author} key={comment.id}> 
      {comment.text} 
     </Comment> 
    )} 
     </div> 
    } 
}); 

this.props.comments内のデータは次のとおりです。

{"comments":{"3":{"id":3,"author":"Me","text":"This is one comment!"},"4":{"id":4,"author":"You","text":"This is one more comment!"},"5":{"id":5,"author":"Bar","text":"This is one comment!"},"6":{"id":6,"author":"Foo","text":"This is one more comment!"},"7":{"id":7,"author":"Baz","text":"This is one comment!"},"8":{"id":8,"author":"Boo","text":"This is one more comment!"}}} 

はthis.props.commentsがimmutable.Mapであることに注意してください。

immutable.Mapthis.props.commentsの値をリストに最初に変換することなく（toList）値をマップするだけで、値を繰り返し処理します。

UPDATE：

は私がしようとすると、そのcomment.getが未定義であるというエラーが出ます：

const CommentList = ({comments}) => 
    <div className="commentList"> 
     {comments.map(comment => 
      <Comment author={comment.get('author')} key={comment.get('id')}> 
       {comment.text} 
      </Comment>)} 
    </div> 

期待通りに次のコードは動作しますが：

const CommentList = ({comments}) => 
    <div className="commentList"> 
     {comments.valueSeq().map((comment) => 
      <Comment author={comment.author} key={comment.id}> 
       {comment.text} 
      </Comment> 
     )} 
    </div> 

なぜそれは？

Answer 1

Immutable.Mapオブジェクトにはデフォルトでマップ関数があります。不変なリストを反復処理するのと同じように、反復処理を行うことができます。唯一の注意点は、結果は反復要素のキーと同じキーを持つMapですが、対応する値はmap（）コールバック関数から返される値になります。 Mapはオブジェクトの深い変換をしていないので、fromJS（）を使うことをお勧めします。このスレッドをチェックアウトしてください：Difference between fromJS and Map。

あなたは以下のコードを試すことができます：あなたはImmutable.Mapを使用してオブジェクトを作成するとき、それは不変オブジェクトとして最初のレベルのみを取っているので、それがある

const comments = fromJS({ 
 
"3":{"id":3,"author":"Me","text":"This is one comment!"}, 
 
"4":{"id":4,"author":"You","text":"This is one more comment!"}, 
 
"5":{"id":5,"author":"Bar","text":"This is one comment!"}, 
 
"6":{"id":6,"author":"Foo","text":"This is one more comment!"}, 
 
"7":{"id":7,"author":"Baz","text":"This is one comment!"}, 
 
"8":{"id":8,"author":"Boo","text":"This is one more comment!"} 
 
}) 
 

 
comments.map(comment => 
 
     <Comment author={comment.get('author')} key={comment.get('id')} > 
 
      {comment.get('text')} 
 
     </Comment>);