代码之家  ›  专栏  ›  技术社区  ›  BartoszTermena

显示重复名称的数量

  •  -1
  • BartoszTermena  · 技术社区  · 6 年前

    因此,我有一些组件:

    轨道:

    render() {
    
            const tracks = [
             {id: '1', artistName: "Eagles", trackName: "Hotel California"},
             {id: '2', artistName: "Halsey", trackName: "Without Me"},
             {id: '3', artistName: "Ariana Grande", trackName: "thank u, next"}
            ]
            return (
              <div>
                  {tracks && tracks.map(track => {
                      return (
                         <TrackSummary track={track} key={track.id} />
                      )
                  })}
              </div>
            )
          }
    

    跟踪摘要:

    const TrackSummary = ({track}) => {
      return (
        <div>
           <div className="card">
                    <h5 className="card-header">
                        <strong>{track.trackName}</strong> by: {' '} {track.artistName}
                    </h5>
                </div>
        </div>
      )
    }
    

    {track.trackName} 是重复的,我不想显示两次,但只显示一次,旁边有重复的次数。 如示例中所示: enter image description here

    我要展示两次 Without Me by: Halsey 2 因为轨迹出现两次。

    提前谢谢你的帮助!

    1 回复  |  直到 6 年前
        1
  •  1
  •   Aamin Khan    6 年前

    首先,我们需要使用 trackName ,然后计算我们有多少个副本,并将其添加到 count

    var arr = [
             {id: '1', artistName: "Eagles", trackName: "Hotel California"},
             {id: '2', artistName: "Halsey", trackName: "Without Me"},
             {id: '3', artistName: "Ariana Grande", trackName: "thank u, next"},
             {id: '2', artistName: "Halsey", trackName: "Without Me"}
    ]
            
    var grouped = _.groupBy(arr,'trackName');
    var mappedArr = [];
    _.map(grouped,function(val,key){
      mappedArr.push({
        count: val.length,
        ...val[0]
      })
    });
    console.log(mappedArr)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

    希望能有帮助。