按字母顺序呈现名称列表并按其第一个字符分组

Question

我需要按字母顺序呈现名称列表，并按每个名称的起始字母分组。它应该是这样的：

**A**

Anders
Anton
Angela

**B**

Brian
Bernard

**C**

Carl

我当前的解决方案可以对对象中包含的所有名称进行排序，但是我无法在名称前添加起始字母作为元素（例如，在“Anders”上方呈现“A”和在“Brian”上方呈现“B”）

当前解决方案：

completeEmpList = empList
  .sort((a, b) => a.Name.localeCompare(b.Name))
    .map((emp) => (
      <div> {emp.Name} </div>
    ))

它不应该处理最多超过 300 个元素的数据，因此在这种情况下优化不是那么重要。

Answer 1

您可以先排序，然后用于reduce创建一个对象，并按每个名称的第一个字符对您的值进行分组。

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      items: [{ Name: "Carl" },{ Name: "Anders" },{ Name: "Anton" },{ Name: "Brian" },{ Name: "Bernard" },{ Name: "Angelaa" }]
    }
  }
  
  render() {
    const group = this.state.items
    .sort((a, b) => a.Name.localeCompare(b.Name))
    .reduce((r, e) => {
      const key = e.Name[0];
      if(!r[key]) r[key] = []
      r[key].push(e);
      return r;
    }, {});
    
    return <div>
    {Object.entries(group)
      .map(([key, value], i) => {
        return <div key={i}>
          <strong>{key}</strong>
          {value.map((item, j) => <div key={j}>{item.Name}</div>)}
        </div>
      })}
      </div>
    }
  }

  ReactDOM.render(<Example />, document.querySelector("#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"></div>