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

在对象数组上映射并根据名字筛选

reactjs javascript

arunmmanoharan · 技术社区 · 7 年前

我画过地图,但看起来不太好。有人能给我这个建议吗?

请给出建议。

1 回复 | 直到 7 年前

Abdelkarim EL AMEL 7 年前

试试这个:

  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