映射关联数组的值

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.Map this.props.comments 中的值而不首先通过 (toList) 将其值转换为列表，而我只是简单地迭代这些值。

更新：

当我尝试

时，我收到一条错误消息，指出 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() 回调函数中 return 得到的值。由于 Map 没有对象的深度转换，我建议使用 fromJS()。请在此处查看此主题：Difference between fromJS and 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>);

映射关联数组的值

Map the values of an associate array

javascript

reactjs

immutable.js