Problem with Infinite Scrolling in React

1

I'm trying to do an "Infinite Scrolling (I used this RealScout plugin , but even without reaching end of the page, it always makes new requests, without stopping. Look at the image:

Followmycode:

sentences.jsx

importInfiniteScrollfrom'redux-infinite-scroll'import{loadMore}from'./frasesActions'classFrasesextendsComponent{constructor(props){super(props)}componentWillMount(){this.props.loadMore()}renderRows(){constlistFrases=this.props.listFrases||[]returnlistFrases.map((item,index)=>(<GridstyleCss='frase'cols='121212'key={item.id}>...</Grid>))}render(){return(<Container><Row><Gridcols='12126'offsets='003'id='content'><Rowid='frases'><InfiniteScrollloadMore={this.props.loadMore}>{this.renderRows()}</InfiniteScroll></Row></Grid></Row></Container>);}}constmapStateToProps=state=>({listFrases:state.frases.listFrases,user:state.auth.user})constmapDispatchToProps=dispatch=>bindActionCreators({loadMore},dispatch)exportdefaultconnect(mapStateToProps,mapDispatchToProps)(Frases)

phrasesActions.js

importaxiosfrom'axios'importconstsfrom'../consts'exportfunctiongetFrases(start,limit){constrequest=axios.get('${consts.OAPI_URL}/frases/${start}/${limit}',axios.defaults)returnrequest}exportfunctionloadMore(){console.log("chamou")
    return (dispatch, getState) => {
        let state = getState()
        let list = state.frases.listFrases;
        let tmpList;
        let pageNum = 0;
        let itemCount = 15;

        if (list.length == 0) {
            pageNum = 0
        } else {
            pageNum = list.length / itemCount + 1
        }

        getFrases(pageNum, itemCount).then(function (obj) {
            tmpList = list.concat(obj.data.frases)
            dispatch({
                type: 'FRASES_CARREGADO',
                payload: {data: {
                    frases: tmpList,
                    validToken: state.auth.validToken
                }}
            })
        })
    }
}

phrasesReducer.js

const INITIAL_STATE = {
    listFrases: []
}

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case 'FRASES_CARREGADO':
            return { ...state,
                listFrases: action.payload.data.frases
            }
        default:
            return state
    }
}
    
asked by anonymous 09.06.2017 / 17:38

0 answers