地図の後の結果を制限する

Question

私はマッピングしているオブジェクトの配列を持っていて、id（<AttachedComment />）と一致する場合はコンポーネントを返します。この設定は、以下のコードではうまくいきますが、地図作成後の結果を最初の3項目に限定したいと思います。 pre-map slicingは、IDマッチングの前に配列の量を制限しているため、適切なアプローチではありません。ポストマップされた配列をスライスする良い方法はありますか？

オリジナル配列マップ：

{ this.props.comments.map((comment, i) => 
        <AttachedComment key={comment.recordCommentId} deleteCommentFunc={this.props.deleteCommentFunc} commentObj={comment} recordComponentId={this.props.recordId} userId={this.props.user} csrf={this.props.csrf}/> 
        )} 

AttachedComment：

const AttachedComment = props => { 
    if(props.commentObj.recordIdHash == props.recordComponentId){ 
     return (
      <Comment {...props.commentObj} deleteCommentFunc={props.deleteCommentFunc} key={props.commentObj.recordCommentId} currentUserId={props.userId} csrf={props.csrf}/> 
      ) 
    } else { 
     return null; 
    } 
} 

Answer 1

renderメソッドの開始時に最初にしたいコメントをフィルタリングし、新しい配列に割り当てます。次に、マップ操作の前に結果を下に示すようにスライスします。

注：あなたがアプローチの下に提案し、答えを

render() { 
    const filteredList = this.props.comments.filter((comment) => comment.recordIdHash === this.props.recordId); 

    return (
     <div> 
      {filteredList.slice(0, 3).map((comment, i) => 
       <AttachedComment key={comment.recordCommentId} deleteCommentFunc={this.props.deleteCommentFunc} 
           commentObj={comment} recordComponentId={this.props.recordId} 
           userId={this.props.user} csrf={this.props.csrf}/> 
      )} 
     </div> 
    ); 
} 

Answer 2

 let counter; 
     const AttachedComment = props => { 
     if(props.commentObj.recordIdHash == props.recordComponentId && counter < 4){ 
      return (
       counter++ 
       <Comment {...props.commentObj} deleteCommentFunc={props.deleteCommentFunc} key={props.commentObj.recordCommentId} currentUserId={props.userId} csrf={props.csrf}/> 

       ) 
     } else { 
      return counter = 0; 
     } 
    }