मेरे पास InfiniteLoader को Table के साथ लागू करने वाला निम्न उदाहरण है। समस्या यह है कि loadMoreRows को लोड पर नहीं कहा जाता है या जब घटक माउंट किया जाता है। हालांकि, अगर मैं मैन्युअल रूप से एपीआई कॉल निष्पादित करता हूं और परिणाम को props के माध्यम से पास करता हूं, loadMoreRows को startIndex 0 के साथ बुलाया जाता है और इस प्रकार मेरे पास एक ही API कॉल दो बार होती है।

import React = require('react');
import _ = require('lodash');
import Immutable = require('immutable');
import Api = require('./Api');

const STATUS_LOADING = 1,
      STATUS_LOADED = 2,
      LOG_LIMIT = 200;

interface Props {
    logEntries: Immutable.List<Immutable.Map<string, any>>;
}

interface State {
    logEntries?: Immutable.List<Immutable.Map<string, any>>;
    count?: number;
    loadedRowsMap?: any;
}

class LogViewer extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);

        this.state = {
            logEntries: props.logEntries,
            count: 0,
            loadedRowsMap: {}
        };
    }

    render() {
        return {this.renderLoader()};
    }

    private renderLoader() {
        const {logEntries, count} = this.state;
        return (
            <InfiniteLoader isRowLoaded={this.isRowLoaded.bind(this)}
                            loadMoreRows={this.loadMoreRows.bind(this)}
                            minimumBatchSize={LOG_LIMIT}
                            rowCount={logEntries.size} >
                {
                    ({onRowsRendered, registerChild}) => (
                        <AutoSizer disableHeight>
                            {
                                ({width}) => (
                                    <Table headerHeight={20}
                                           height={400}
                                           onRowsRendered={onRowsRendered}
                                           ref={registerChild}
                                           rowCount={count}
                                           className='log-entries'
                                           gridClassName='grid'
                                           headerStyle={{ fontSize: 15 }}
                                           rowGetter={({index}) => logEntries.get(index)}
                                           rowHeight={50}
                                           width={width} >
                                        <Column label='Name'
                                                key='name'
                                                dataKey='name'
                                                width={200} />
                                    </Table>
                                )
                            }
                        </AutoSizer>
                    )
                }
            </InfiniteLoader>
        );
    }

    private isRowLoaded({index}) {
        const {loadedRowsMap} = this.state;
        return !!loadedRowsMap[index];
    }

    private loadMoreRows({startIndex, stopIndex}) {
        const {loadedRowsMap, level, logEntries} = this.state;

        _.range(startIndex, stopIndex).forEach(i => {
            loadedRowsMap[i] = STATUS_LOADING;
        });
        this.setState({ loadedRowsMap });

        const offset = Math.floor((startIndex + 1) / LOG_LIMIT);
        return Api.logs(LOG_LIMIT, offset)
            .then(({body: [count, logs]}) => {
                _.range(startIndex, stopIndex).forEach(i => {
                    loadedRowsMap[i] = STATUS_LOADED;
                });
                const newLogs = logEntries.toJS().concat(logs);
                this.setState({
                    count,
                    logEntries: Immutable.fromJS(newLogs),
                    loadedRowsMap
                });
            });
    }
};
2
XeniaSis 13 फरवरी 2017, 13:02

1 उत्तर

सबसे बढ़िया उत्तर

समस्या यह है कि loadMoreRows को लोड पर या घटक को माउंट किए जाने पर नहीं कहा जाता है।

किसी भी समय कई पंक्तियों को लोड किया जाता है< /a>, InfiniteLoader isRowLoaded प्रत्येक पंक्ति के लिए यह निर्धारित करने के लिए कि क्या इसे लोड करने की आवश्यकता है। अगर isRowLoaded झूठी वापसी करता है, तो वह पंक्ति कतारबद्ध हो जाती है और loadMoreRows को अनलोड की गई पंक्तियों की प्रत्येक श्रेणी के लिए टुकड़ों में कहा जाता है

उपरोक्त आपके मामले में, मेरा विश्वास हो रहा है कि आप Table को कोई प्रारंभिक पंक्ति नहीं दे रहे हैं - इसलिए Grid प्रारंभ में कुछ भी प्रस्तुत नहीं कर रहा है (क्योंकि इसमें कोई पंक्तियों को प्रस्तुत करने के लिए) और इसलिए ऊपर से लिंक किए गए पंक्तियों-लोड किए गए कॉलर के पास फिर से शुरू करने के लिए कुछ भी नहीं है और लोड करने के लिए कुछ भी नहीं है। आपके पास यहां कुछ विकल्प हैं- या तो पहले लोड को स्वयं शुरू करें, या InfiniteLoader को टिप देने के लिए एक +1 खाली पंक्ति जोड़ें कि यह अधिक डेटा का अनुरोध करे (जैसे मैं इस उदाहरण में करता हूं)।

2
bvaughn 13 फरवरी 2017, 20:37
मुझे लगता है कि समस्या यह थी कि मैंने प्रारंभिक लॉग के लिए स्थिति को लोड करने के लिए सेट नहीं किया था। धन्यवाद, यह हिस्सा अब काम करता है!
 – 
XeniaSis
16 फरवरी 2017, 11:44