如何使用 React Virtualized Infinite 加载器以相反的顺序列出数据？

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

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

如果您想实现一个逆向表/列表/提要（作为 Slack），您的方法“isRowLoaded”可能如下所示：

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

另外，需要从末尾开始，所以需要设置视图第一次滚动到末尾：

scrollAtIndex={this.state.items.length}