Question

我正在尝试使用React Virtualized创建聊天应用程序。到目前为止一切正常，但我认为从列表中使用keyMapper和rowRenderer时我觉得我做错了。

缓存使用id在_rowHeightCache中存储高度，但似乎使用索引而不是id来查找高度。我不确定我是否应该将id作为rowIndex传递给CellMeasurer以获得正确的高度或类似的东西。

问题在于由于消息列表的顺序改变而导致高度错误，因此索引没有正确的高度，并且消息可以被删除，从而搞乱索引命令。我认为应该通过使用keyMapper查找高度来修复，但我必须做错了。

以下是我如何使用它的已编辑版本。

constructor(props) {
        this._cache = new CellMeasurerCache({
            defaultHeight: 45,
            fixedWidth: true,
            keyMapper: (index) => _.get(this.props.messageList[index], ['msgId'])
        });
    }

    render() {
        const props = this.filterProps(this.props),
            list = this.props.messageList,
            rowCount = list.length;

        return (

            <InfiniteLoader
                threshold={0}
                isRowLoaded={this._isRowLoaded}
                loadMoreRows={this._loadMoreRows}
                rowCount={rowCount}>
                {({onRowsRendered, registerChild}) => (
                    <AutoSizer>
                        {({width, height}) => (
                            <List
                                ref={(ref) => {
                                    this.streamLane = ref;
                                    registerChild(ref);
                                }}
                                height={height}
                                width={width}
                                onRowsRendered={onRowsRendered}
                                rowCount={rowCount}
                                rowRenderer={this._rowRenderer}
                                deferredMeasurementCache={this._cache}
                                rowHeight={this._cache.rowHeight}
                            />
                        )}
                    </AutoSizer>
                )}
            </InfiniteLoader>
       );
   }

    _rowRenderer({ index, key, parent, style }) {
        return (
            <CellMeasurer
                cache={this._cache}
                columnIndex={0}
                key={key}
                parent={parent}
                rowIndex={index}>
                <div style={{...style}}>
                    {this.props.messageList[index]}
                </div>
            </CellMeasurer>
        );
    }

    _loadMoreRows({startIndex, stopIndex}) {

        return new Promise((resolve) => {
            if (!!stopIndex || !!startIndex || this.props.hasLastMessage || this.state.isPinned) {
                return resolve();
            }

            this.props.loadOlder(() => resolve);
        });
    }

    _isRowLoaded({index}) {
        if (index === 0) return false;
        return !!this.props.messageList[index];
    }
  }

任何帮助，建议或批评都会令人惊叹。

Answer 1

问题在于，由于邮件列表的顺序发生变化而导致高度错误，因此索引不具备适当的高度，并且可以删除消息，从而搞乱索引订单。 / p>

您的示例代码并未显示订单如何更改或更改后的操作，因此很难说出您的错误。

但是当订单发生变化时（例如，您对数据进行排序，或者您将新项目添加到列表的开头，导致旧项目发生变化），那么您需要让List知道其缓存职位可能陈旧。在您的情况下执行此操作，您需要致电this.streamLane.recomputeRowHeights()。

（您可以将第一个更改的项目的索引传递给recomputeRowHeights，但我认为在您的情况下，可能所有项目都已移位？我不知道，因为我没有全部你的代码。）

致电recomputeRowHeights后，List将使用CellMeasurerCache报告的高度重新计算布局。 That cache uses your keyMapper function：

rowHeight = ({index}: IndexParam) => {
  const key = this._keyMapper(index, 0);

  return this._rowHeightCache.hasOwnProperty(key)
    ? this._rowHeightCache[key]
    : this._defaultHeight;
};

因此即使他们的指数发生了变化，也不需要重新测量项目。

使用React Virtualized CellMeasurer更改List和动态高度的数据顺序

1 个答案: