如何使用 React 虚拟化无限加载器以相反的顺序列出数据?

Question

我试图使用无限加载器列出大量数据。但就我而言，数据列表需要以相反的顺序呈现。但是我没有得到结果，它继续加载记录，明智地我在下面的链接中进行了更新，

https://codepen.io/john0075081/pen/qBExxqR

const { Table, Column, AutoSizer, InfiniteLoader } = ReactVirtualized
const generateRandomItem = (idx) => ({
id: idx,
name: faker.name.findName(),
email: faker.internet.email()
})
class App extends React.Component {
constructor () {
super()
this.loadMore = this.loadMore.bind(this)
// fake data
let items = []
for (let i = 0, l = 100; i < l; i++) {
items.push(generateRandomItem(i))
}
this.state = {
items: items
}
}
loadMore ({ startIndex, stopIndex }) {
console.log(startIndex, stopIndex);
// simulate a request
setTimeout(() => {this.actuallyLoadMore()}, 500)
// we need to return a promise
return new Promise((resolve, reject) => {
this.promiseResolve = resolve;
})
}
actuallyLoadMore () {
// fake new data
let newItems = []
let s = this.state.items.length + 1
for (let i = 0, l = 100; i < l; i++) {
newItems.push(generateRandomItem(s + i))
}
this.setState({ items: this.state.items.concat(newItems)})
// resolve the promise after data where fetched
this.promiseResolve();
}
render () {      
return (
<div className="container">
<h1>Infinite scrolling autosize table example </h1>
<InfiniteLoader
isRowLoaded={({ index}) => !!this.state.items[index]}
threshold={1}
loadMoreRows={this.loadMore}
rowCount={100000}
>
{({onRowsRendered, registerChild}) => (
<AutoSizer>
{({ width}) => (
<Table
ref={registerChild}
onRowsRendered={onRowsRendered}
rowClassName='table-row'
headerHeight={40}
width={width}
height={300}
rowHeight={40}
scrollToIndex={this.state.items.length-1}
scrollToAlignment="end"
rowCount={this.state.items.length}
rowGetter={({ index }) => this.state.items[index]}
>
<Column
label='Id'
dataKey='id'
width={width * 0.2}
/>
<Column
label='Name'
dataKey='name'
width={width * 0.4}
/>
<Column
label='E.mail'
dataKey='email'
width={width * 0.4}
/>
</Table>
)}
</AutoSizer>
)}
</InfiniteLoader>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
)

有什么解决方案可以实现相反的顺序吗？

Answer 1

检查行是否已加载的条件始终为 true，因此永远不会调用获取更多行的方法。

如果你想实现一个反向表/列表/提要(作为Slack(，你的方法"isRowLoaded"可能看起来像：

isRowLoaded ({index}) {
if (index > 0) {
return true
}
return this.isLoading
}

此外，您需要从末尾开始，因此您需要设置视图第一次滚动到末尾：

scrollAtIndex={this.state.items.length}