Что такое isRowLoaded и когда он действительно вызывается - PullRequest
0 голосов
/ 01 февраля 2020

В настоящее время я работаю над реализацией бесконечного загрузчика вместе с таблицей в реагирует на виртуализацию .

Когда я отлаживаю isRowLoaded с оператором console.log, я не могу понять когда он вызывается, так как индекс печатается больше, чем ожидалось, хотя фактические строки изначально в таблице равны 15.

Также не ясно, что следует передавать в качестве значения для строки Count в Infinite Loader

class InfiniteLoadingList extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.props.getTotalCount();
  }

  render() {
    const {list} = this.props;

    const isRowLoaded = ({index}) => {
      console.log(index);
      return index < list.length;
    };

    const loadMoreRows = this.props.isNextPageLoading ? () => {
    } : this.props.loadNextPage;

    return (
      <If condition={this.props.list.length > 0}>
        <div style={{marginTop: '10px'}}>
          <InfiniteLoader
            isRowLoaded={isRowLoaded}
            loadMoreRows={loadMoreRows}
            rowCount={100000}>
            {({onRowsRendered, registerChild}) => (
              <Table
                width={1200}
                height={300}
                headerHeight={20}
                rowHeight={30}
                rowCount={this.props.list.length}
                rowGetter={({index}) => this.props.list[index]}
                ref={registerChild}
                onRowsRendered={onRowsRendered}
                headerStyle={{
                  backgroundColor: '#f9c000',
                  fontWeight: 'bold',
                  color: '#444443',
                  margin: '0',
                  padding: '20px'
                }}
                rowStyle={{
                  fontSize: '0.7em',
                  fontWeight: 'normal',
                  color: '#444443',
                  padding: '20px',
                  borderBottom: '1px solid whitesmoke'
                }}
              >
                 //code to render table
              </Table>
            )}
          </InfiniteLoader>
        </div>
      </If>
    );
  }
}

function mapStateToProps(state) {
  const {hasNextPage, isNextPageLoading, list, total} = state.infiniteLoadingListReducer;
  return {
    hasNextPage,
    isNextPageLoading,
    list,
    total
  };
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators(
    {
      loadNextPage: loadNextPage,
      initiateLoadNextPage: initiateLoadNextPage,
      terminateLoadNextPage: terminateLoadNextPage,
      getTotalCount: getTotalCount
    },
    dispatch
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(InfiniteLoadingList);

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