映射对象数组并根据名字过滤

Question

我已经完成了映射，但是看起来不太好。有人可以给我建议吗？

请咨询。

Answer 1

尝试一下：

  class App extends Component {

  render() {
    const titleArray = uniq(data.map((item) => item.name.slice(0, 1)));
    const peopleData = titleArray.map(item => {
      return {
        [item]: data.filter((people) => people.name[0] === item)
      };
    });
    return (
      <div className="app-directory-container">
        <div className="app-directory">
          {titleArray.map(item => {
            return (
              <Fragment key={uniqueId()}>
                <div key={uniqueId()} className="app-directory-separator">{item}</div>
                {peopleData.map((people) => {
                  return (
                    <Fragment key={uniqueId()} >
                      {!isEmpty(people[item]) && people[item].map((item3) => {
                        return (<div className="app-directory-item"> {item3.name} </div>)
                      })}
                    </Fragment>
                  )})}

              </Fragment>
            );
          })}
        </div>
      </div>
    );
  }
}

<div className="app-directory-item">应该在地图内。

工作stackblitz