Как вывести данные в обратном порядке с помощью загрузчика React Virtualized Infinite? - PullRequest
0 голосов
/ 24 января 2020

Я попытался перечислить огромное количество данных, используя бесконечный загрузчик. Но в моем случае список данных нужно рендерить в обратном порядке. Но я не получил результат, он продолжает загружать запись Вниз, я обновил в ниже ссылку,

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')
)

Есть ли Любое решение для достижения обратного порядка?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...