如果条件与上一项不同，则在地图功能中显示标题的最佳方法

Question

我有一个在几天列表中循环的反应组件。我只想在日期不同时显示标题。

const items = [
  {
    day: 'Monday',
    band: 'Oasis'
  },
  {
    day: 'Monday',
    band: 'Blur'
  },
  {
    day: 'Monday',
    band: 'Blue'
  },
  {
    day: 'Tuesday',
    band: 'REM'
  },
  {
    day: 'Wednesday',
    band: 'Hi-Lo'
  },
  {
    day: 'Wednesday',
    band: 'Bla'
  }
];

我的渲染函数如下所示：

items.map((item, index) => {
  {items[index] !== items[index + 1] && (
      <h1>{item.day}</h1>
  )         
    return <p>{item.band}</p>
  }
});

我想让它看起来像下面这样：

周一

绿洲

模糊

蓝色的

周二

快速眼动睡眠

周三

高低

布拉

Answer 1

您应该按天对对象进行分组，然后渲染它

const items = [
  {
    day: 'Monday',
    band: 'Oasis'
  },
  {
    day: 'Monday',
    band: 'Blur'
  },
  {
    day: 'Monday',
    band: 'Blue'
  },
  {
    day: 'Tuesday',
    band: 'REM'
  },
  {
    day: 'Wednesday',
    band: 'Hi-Lo'
  },
  {
    day: 'Wednesday',
    band: 'Bla'
  }
];

class App extends React.Component {
   render() {
       const grouped = items.reduce((acc, item) => {
           if(acc[item.day]) {
              acc[item.day].push(item);
           }else {
              acc[item.day] = [item]; 
           }
           return acc;
       }, {})
       return (
          <div>
               {Object.keys(grouped).map(day => {
                  return <ul>
                     <li>{day}</li>
                     {grouped[day].map(item => {
                        return <li>{item.band}</li>
                     })}
                  </ul>
               })}
          </div>
       )
   }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>