javascript - セル測定器で仮想化された反応でのセルのオーバーラップの問題

Question

React Virtualized を使用して、次の機能を持つアイテム リストをウィンドウ表示しています。1) 任意のアイテムをクリックすると、アイテムの詳細を更新できる詳細パネルが表示されます。リストに戻ると、リストのアイテム セルに詳細が表示されます。彼は多くの詳細を追加して大きくしたり、詳細を削除してサイズを縮小したりできます

2) 彼はアイテムを削除したり、特定の詳細または詳細なしで別のアイテムをリストに追加したりできます。

動的な高さがサポートされているため、CellMeasurer は私の要件を満たします。しかし、私はそれで次の問題を抱えています

1）最初にリストが初めてマウントされると、最初のいくつかのアイテムが正しく測定されて表示されますが、最後までスクロールするとすぐに、アイテムが互いに重なって表示されます（ポジショニングが正しくない、defaultHeightが適用されていると推測しています未測定のセルに)。これは、リストが再レンダリングされるとすぐに正常に機能します。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>
     )
}

また、次のように componentDidUpdate でアイテムの再測定を手動でトリガーしています()

    Component Item 
    ...
    componentDidUpdate() {
        console.log('loading called for ', this.props.annotation.getId())
        this.props.onLoad()
    }
    ...

メインの親では、リストが更新されるたびにリストの高さを再計算し、次のように forceupdate をトリガーしています

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