Javascript 用cell-measurer虚拟化react中的单元重叠问题

我使用React Virtualized来打开我的项目列表，它具有以下功能 1） 单击任何项目后，用户将收到一个详细信息面板的提示，在该面板中，用户将能够更新项目的详细信息。当他返回列表时，他将能够在列表的项目单元格中看到详细信息。他可以添加很多细节使其更大，或者通过删除细节来缩小尺寸

2） 他可以删除该项目，或在列表中添加另一个项目，包括某些详细信息或没有详细信息

CellMeasurer满足我的要求，因为支持动态高度。但我有以下问题

1） 最初，当我的列表第一次装载时，前几个项目被正确地测量和显示，但当我滚动到最后时，项目就会彼此重叠。（定位不正确，我猜默认高度应用于未测量的单元格）。只要列表再次重新提交，此操作就可以正常工作。 2） 此外，当我更新项目的详细信息时，列表不会随着新的高度调整而更新

我确信我的实现在某个地方是不正确的，但我已经花了很多时间为此绞尽脑汁。请让我知道这里可以做些什么来解决这个问题

ItemView = props => {
        const {index, isScrolling, key, style} = props,
            items = this.getFormattedItems()[index]
        return (
            <CellMeasurer
                cache={this._cache}
                columnIndex={0}
                isScrolling={isScrolling}
                key={key}
                rowIndex={index}
                parent={parent}>
                {({measure, registerChild}) => (
                    <div key={key}  style={style} onLoad={measure}>
                        <div
                            onLoad={measure}
                            ref={registerChild}
                            {...parentProps}>
                            <Item
                                onLoad={measure}
                                key={annotation.getId()}
                                {...childProps}
                            />
                        </div>
                    </div>
                )}
            </CellMeasurer>
        )
    }

renderDynamicListOfItems(){
   return (<div>
                <List
                    height={500}
                    ref={listComponent => (_this.listComponent = listComponent)}
                    style={{
                        width: '100%'

                    }}
                    onRowsRendered={()=>{}}
                    width={1000}
                    rowCount={props.items.length}
                    rowHeight={this._cache.rowHeight}
                    rowRenderer={memoize(this.ItemView)}
                    // onScroll={onChildScroll}
                    className={listClassName}
                    overscanRowCount={0}
                />
            </div>
     )
}

在主父级中，每当列表更新时，我都会重新计算列表的高度，并触发forceupdate，如下所示

Component ParentList
...
    componentDidUpdate() {
        console.log("calling this parent recomputing")
        this.listComponent.recomputeRowHeights()
        this.listComponent.forceUpdateGrid()
    }
...

Component ParentList
...
    componentDidUpdate() {
        console.log("calling this parent recomputing")
        this.listComponent.recomputeRowHeights()
        this.listComponent.forceUpdateGrid()
    }
...