反应虚拟化的无限滚动渲染聚合数据

Question

我有一个无限加载程序列表组件，它呈现数据数组。我需要汇总数据（按天分组），所以我做了两个级别的数组：

list = {
  [ 
    {
      group:'09-20',
      data: [
        content: 'content',
        contentInfo: 'contentInfo'
      ]
    },

    {
      group:'09-21',
      data: [
        content: 'content',
        contentInfo: 'contentInfo'
      ]
    },
  ]
    // and so on...
}

有没有办法渲染这个？我尝试在renderRow函数中映射第二个数组（此处称为数据），但结果是滚动错误（由于渲染导致数据闪烁，并且未触发loadMoreRows func）

renderRow：

  renderRow = ({ index, key, style }) => {
    let content;
    if (!this.state.results[index]) content = <ActivityLogRowLoading />;
    else {
      const data = this.state.results[index].data.map(element => (
        <Element>
          <Content>{element.description}</Content>
          <Date>
            {moment(element.created).format('YYYY-MM-DD HH:mm:ss')}
          </Date>
        </Element>
      ));
      content = (
        <div>
          {this.state.results[index].group} 
          {data}
        </div>
      );
    }
    return (
      <div key={key} style={style}>
        {content}
      </div>
    );
  };