Я попытался перечислить огромное количество данных, используя бесконечный загрузчик. Но в моем случае список данных нужно рендерить в обратном порядке. Но я не получил результат, он продолжает загружать запись Вниз, я обновил в ниже ссылку,
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')
)
Есть ли Любое решение для достижения обратного порядка?